Initial commit: Next.js + Payload CMS for moreminimore-redesign
- Next.js 16 App Router + Payload CMS 3.82 - PostgreSQL via @payloadcms/db-postgres - All pages: Home, Services (4), About, Portfolio, Blog, Contact, FAQ - PDPA: CookieBanner, ConsentLogs API, Privacy Policy, Terms, Cookie Policy - SEO: sitemap, robots.txt, metadata exports, JSON-LD
This commit is contained in:
Kunthawat
9
.dockerignore
Normal file
9
.dockerignore
Normal file
@@ -0,0 +1,9 @@
|
||||
node_modules
|
||||
.next
|
||||
out
|
||||
dist
|
||||
build
|
||||
*.log
|
||||
.env*.local
|
||||
.DS_Store
|
||||
*.pem
|
||||
17
.env.example
Normal file
17
.env.example
Normal file
@@ -0,0 +1,17 @@
|
||||
# Payload CMS
|
||||
PAYLOAD_SECRET=your-super-secret-key-change-in-production
|
||||
DATABASE_URL=postgresql://payload:payloadpass@localhost:5432/payload
|
||||
|
||||
# Server
|
||||
NEXT_PUBLIC_SERVER_URL=http://localhost:3000
|
||||
|
||||
# Analytics (PDPA - require consent)
|
||||
NEXT_PUBLIC_GA4_ID=G-XXXXXXXXXX
|
||||
NEXT_PUBLIC_UMAMI_ID=b2e87a6c-0b64-43c8-bb09-e406ffca0af1
|
||||
|
||||
# Contact form (optional)
|
||||
SMTP_HOST=smtp.gmail.com
|
||||
SMTP_PORT=587
|
||||
SMTP_USER=your-email@gmail.com
|
||||
SMTP_PASS=your-app-password
|
||||
CONTACT_EMAIL=contact@moreminimore.com
|
||||
39
Dockerfile
Normal file
39
Dockerfile
Normal file
@@ -0,0 +1,39 @@
|
||||
# Multi-stage Dockerfile for Next.js + Payload CMS with PostgreSQL
|
||||
# Requires `output: 'standalone'` in next.config.ts
|
||||
|
||||
FROM node:22-alpine AS deps
|
||||
RUN apk add --no-cache libc6-compat
|
||||
WORKDIR /app
|
||||
|
||||
COPY package.json pnpm-lock.yaml* ./
|
||||
RUN corepack enable && corepack prepare pnpm@9.0.0 --activate && pnpm install --frozen-lockfile
|
||||
|
||||
FROM deps AS builder
|
||||
WORKDIR /app
|
||||
COPY --from=deps /app/node_modules ./node_modules
|
||||
COPY . .
|
||||
|
||||
RUN pnpm build
|
||||
|
||||
FROM node:22-alpine AS runner
|
||||
WORKDIR /app
|
||||
|
||||
ENV NODE_ENV production
|
||||
|
||||
RUN addgroup --system --gid 1001 nodejs
|
||||
RUN adduser --system --uid 1001 nextjs
|
||||
|
||||
RUN mkdir .next
|
||||
RUN chown nextjs:nodejs .next
|
||||
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/public ./public
|
||||
|
||||
USER nextjs
|
||||
|
||||
EXPOSE 3000
|
||||
ENV PORT 3000
|
||||
ENV HOSTNAME="0.0.0.0"
|
||||
|
||||
CMD ["node", "server.js"]
|
||||
40
docker-compose.yml
Normal file
40
docker-compose.yml
Normal file
@@ -0,0 +1,40 @@
|
||||
version: '3'
|
||||
|
||||
services:
|
||||
payload:
|
||||
image: node:22-alpine
|
||||
ports:
|
||||
- '3000:3000'
|
||||
volumes:
|
||||
- .:/home/node/app
|
||||
- node_modules:/home/node/app/node_modules
|
||||
working_dir: /home/node/app/
|
||||
command: sh -c "corepack enable && corepack prepare pnpm@9.0.0 --activate && pnpm install && pnpm dev"
|
||||
depends_on:
|
||||
- postgres
|
||||
env_file:
|
||||
- .env
|
||||
networks:
|
||||
- payload-network
|
||||
|
||||
postgres:
|
||||
restart: always
|
||||
image: postgres:16-alpine
|
||||
volumes:
|
||||
- pgdata:/var/lib/postgresql/data
|
||||
ports:
|
||||
- '5432:5432'
|
||||
environment:
|
||||
POSTGRES_USER: payload
|
||||
POSTGRES_PASSWORD: payloadpass
|
||||
POSTGRES_DB: payload
|
||||
networks:
|
||||
- payload-network
|
||||
|
||||
networks:
|
||||
payload-network:
|
||||
driver: bridge
|
||||
|
||||
volumes:
|
||||
pgdata:
|
||||
node_modules:
|
||||
31
next.config.ts
Normal file
31
next.config.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import { withPayload } from '@payloadcms/next/withPayload'
|
||||
import type { NextConfig } from 'next'
|
||||
import path from 'path'
|
||||
import { fileURLToPath } from 'url'
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url)
|
||||
const dirname = path.dirname(__filename)
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
images: {
|
||||
localPatterns: [
|
||||
{
|
||||
pathname: '/api/media/file/**',
|
||||
},
|
||||
],
|
||||
},
|
||||
output: 'standalone',
|
||||
webpack: (webpackConfig) => {
|
||||
webpackConfig.resolve.extensionAlias = {
|
||||
'.cjs': ['.cts', '.cjs'],
|
||||
'.js': ['.ts', '.tsx', '.js', '.jsx'],
|
||||
'.mjs': ['.mts', '.mjs'],
|
||||
}
|
||||
return webpackConfig
|
||||
},
|
||||
turbopack: {
|
||||
root: path.resolve(dirname),
|
||||
},
|
||||
}
|
||||
|
||||
export default withPayload(nextConfig, { devBundleServerPackages: false })
|
||||
45
package.json
Normal file
45
package.json
Normal file
@@ -0,0 +1,45 @@
|
||||
{
|
||||
"name": "nextjs-payload-starter",
|
||||
"version": "1.0.0",
|
||||
"description": "Next.js + Payload CMS starter template with PostgreSQL",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
|
||||
"devsafe": "rm -rf .next && cross-env NODE_OPTIONS=--no-deprecation next dev",
|
||||
"build": "cross-env NODE_OPTIONS=--no-deprecation next build",
|
||||
"start": "cross-env NODE_OPTIONS=--no-deprecation next start",
|
||||
"payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
|
||||
"generate:importmap": "cross-env NODE_OPTIONS=--no-deprecation payload generate:importmap",
|
||||
"generate:types": "cross-env NODE_OPTIONS=--no-deprecation payload generate:types",
|
||||
"lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
|
||||
"docker:dev": "docker compose up -d",
|
||||
"docker:dev:logs": "docker compose logs -f",
|
||||
"docker:down": "docker compose down"
|
||||
},
|
||||
"dependencies": {
|
||||
"@payloadcms/next": "^3.82.1",
|
||||
"@payloadcms/richtext-lexical": "^3.82.1",
|
||||
"@payloadcms/ui": "^3.82.1",
|
||||
"@payloadcms/db-postgres": "^3.82.1",
|
||||
"cross-env": "^7.0.3",
|
||||
"graphql": "^16.8.1",
|
||||
"next": "^16.2.3",
|
||||
"payload": "^3.82.1",
|
||||
"react": "^19.2.4",
|
||||
"react-dom": "^19.2.4",
|
||||
"sharp": "^0.34.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.19.9",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"eslint": "^9.16.0",
|
||||
"eslint-config-next": "^16.2.3",
|
||||
"prettier": "^3.4.2",
|
||||
"typescript": "^5.7.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.20.2 || >=20.9.0"
|
||||
}
|
||||
}
|
||||
291
src/app/(frontend)/about-us/page.tsx
Normal file
291
src/app/(frontend)/about-us/page.tsx
Normal file
@@ -0,0 +1,291 @@
|
||||
import type { Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'บริษัท มอร์มินิมอร์ จำกัด - รับทำเว็บไซต์ AI Chatbot และ Marketing Automation',
|
||||
description: 'บริษัท มอร์มินิมอร์ จำกัด ให้บริการรับทำเว็บไซต์ SEO AI Chatbot และระบบอัตโนมัติทางการตลาดสำหรับ SMEs ไทย',
|
||||
keywords: 'รับทำเว็บไซต์, AI Chatbot, Marketing Automation, SEO, สมุทรสาคร, SMEs ไทย',
|
||||
openGraph: {
|
||||
title: 'บริษัท มอร์มินิมอร์ จำกัด - รับทำเว็บไซต์ AI Chatbot และ Marketing Automation',
|
||||
description: 'บริษัท มอร์มินิมอร์ จำกัด ให้บริการรับทำเว็บไซต์ SEO AI Chatbot และระบบอัตโนมัติทางการตลาดสำหรับ SMEs ไทย',
|
||||
url: 'https://moreminimore.com/about-us',
|
||||
siteName: 'MoreminiMore',
|
||||
locale: 'th_TH',
|
||||
type: 'website',
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: 'บริษัท มอร์มินิมอร์ จำกัด - รับทำเว็บไซต์ AI Chatbot และ Marketing Automation',
|
||||
description: 'บริษัท มอร์มินิมอร์ จำกัด ให้บริการรับทำเว็บไซต์ SEO AI Chatbot และระบบอัตโนมัติทางการตลาดสำหรับ SMEs ไทย',
|
||||
},
|
||||
alternates: {
|
||||
canonical: 'https://moreminimore.com/about-us',
|
||||
},
|
||||
}
|
||||
|
||||
export default function AboutUsPage() {
|
||||
return (
|
||||
<main className="flex-grow">
|
||||
{/* Hero Section */}
|
||||
<section className="py-20 bg-gradient-to-br from-purple-600 via-purple-500 to-blue-600 relative overflow-hidden">
|
||||
{/* Floating Shapes */}
|
||||
<div className="absolute top-20 left-10 w-72 h-72 bg-white/10 rounded-full blur-3xl animate-float-1"></div>
|
||||
<div className="absolute bottom-20 right-10 w-96 h-96 bg-blue-400/10 rounded-full blur-3xl animate-float-2"></div>
|
||||
<div className="absolute top-1/3 left-1/4 w-48 h-48 bg-white/5 rounded-full blur-2xl animate-float-3"></div>
|
||||
|
||||
{/* Grid Pattern */}
|
||||
<div className="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: 'linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px)', backgroundSize: '50px 50px' }}></div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight">
|
||||
เกี่ยวกับเรา
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-white/80 max-w-2xl mx-auto">
|
||||
มอร์มินิมอร์ — พาร์ทเนอร์ด้าน IT และ AI ที่พร้อมเติบโตไปกับคุณ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Vision Section */}
|
||||
<section className="py-24 bg-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<span className="inline-flex items-center gap-2 px-4 py-1 bg-purple-100 text-purple-700 rounded-full text-sm font-medium mb-4">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||||
วิสัยทัศน์
|
||||
</span>
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-gray-900">
|
||||
เติบโตไปด้วยกัน
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 rounded-3xl p-8 md:p-12 text-center">
|
||||
<p className="text-xl md:text-2xl text-gray-700 leading-relaxed">
|
||||
"เราเชื่อว่าความสำเร็จของลูกค้าคือความสำเร็จของเรา<br/>
|
||||
<span className="text-gray-900 font-bold">เมื่อธุรกิจของคุณเติบโต</span> เราก็เติบโตไปด้วยกัน"
|
||||
</p>
|
||||
<p className="text-gray-600 mt-6">
|
||||
ความสำเร็จที่แท้จริงไม่ใช่แค่ตัวเลข แต่คือการเห็นผลงานที่เกิดขึ้นจริงของลูกค้า
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Values Section */}
|
||||
<section className="py-24 bg-gray-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center mb-12 max-w-2xl mx-auto">
|
||||
<span className="inline-flex items-center gap-2 px-4 py-1 bg-purple-100 text-purple-700 rounded-full text-sm font-medium mb-4">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
|
||||
ค่านิยม
|
||||
</span>
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-gray-900">
|
||||
สิ่งที่เรายึดมั่น
|
||||
</h2>
|
||||
<p className="text-gray-600">
|
||||
เรามุ่งเน้นที่ผลลัพธ์ที่จับต้องได้ ไม่ใช่แค่ตัวเลขบนหน้าจอ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
|
||||
{/* Value 1 */}
|
||||
<div className="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
|
||||
<div className="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center mb-6">
|
||||
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-gray-900">เน้นผลงานจริง</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
เราวัดความสำเร็จจากยอดขายที่เพิ่มขึ้นของลูกค้า ไม่ใช่แค่คะแนน SEO หรือจำนวนการเข้าชม
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Value 2 */}
|
||||
<div className="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
|
||||
<div className="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center mb-6">
|
||||
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-gray-900">เป็นพาร์ทเนอร์</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
เราไม่ได้มองลูกค้าเป็นแค่ผู้จ้าง แต่มองเป็นพาร์ทเนอร์ที่จะเติบโตไปด้วยกันในระยะยาว
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Value 3 */}
|
||||
<div className="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
|
||||
<div className="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center mb-6">
|
||||
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-gray-900">คุ้มค่าที่สุด</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
ออกแบบโซลูชันให้เหมาะกับงบประมาณของคุณ เริ่มต้นง่าย ไม่ต้องลงทุนมาก
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Value 4 */}
|
||||
<div className="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
|
||||
<div className="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center mb-6">
|
||||
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-gray-900">ทำงานเร็ว</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
เข้าใจว่าธุรกิจต้องการผลลัพธ์เร็ว ทำงานตรงเวลา ไม่ผัดวันประงัน
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Value 5 */}
|
||||
<div className="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
|
||||
<div className="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center mb-6">
|
||||
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-gray-900">ดูแลต่อเนื่อง</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
ไม่ทิ้งหลังขาย พร้อมสนับสนุนและปรับปรุงระบบให้ตลอดเวลา
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Value 6 */}
|
||||
<div className="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
|
||||
<div className="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center mb-6">
|
||||
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-gray-900">โปร่งใส</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
ราคาชัดเจน ไม่มีค่าใช้จ่ายซ่อนเร้น รายงานผลตรง ชัดเจน
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Why Choose Us */}
|
||||
<section className="py-24 bg-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12 text-gray-900">
|
||||
ทำไมเลือกเรา?
|
||||
</h2>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="bg-gray-50 p-6 rounded-2xl shadow-sm hover:shadow-lg transition-shadow">
|
||||
<div className="w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center mb-4">
|
||||
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||||
</div>
|
||||
<h3 className="font-bold mb-2 text-gray-900">เน้นผลลัพธ์</h3>
|
||||
<p className="text-gray-600 text-sm">เราวัดผลทุกอย่าง และมุ่งเน้นให้เห็นผลจริงในการเพิ่มยอดขาย</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 p-6 rounded-2xl shadow-sm hover:shadow-lg transition-shadow">
|
||||
<div className="w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center mb-4">
|
||||
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
<h3 className="font-bold mb-2 text-gray-900">ราคาเหมาะสม</h3>
|
||||
<p className="text-gray-600 text-sm">ออกแบบมาให้ SMEs สามารถเริ่มต้นได้ง่าย ไม่ต้องลงทุนมาก</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 p-6 rounded-2xl shadow-sm hover:shadow-lg transition-shadow">
|
||||
<div className="w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center mb-4">
|
||||
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
|
||||
</div>
|
||||
<h3 className="font-bold mb-2 text-gray-900">ดูแลต่อเนื่อง</h3>
|
||||
<p className="text-gray-600 text-sm">ไม่ทิ้งหลังขาย พร้อมอบรมและสนับสนุนตลอดการใช้งาน</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 p-6 rounded-2xl shadow-sm hover:shadow-lg transition-shadow">
|
||||
<div className="w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center mb-4">
|
||||
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||||
</div>
|
||||
<h3 className="font-bold mb-2 text-gray-900">ทำงานเร็ว</h3>
|
||||
<p className="text-gray-600 text-sm">เข้าใจว่าธุรกิจต้องการผลลัพธ์เร็ว ทำงานตรงเวลา ไม่ผัดวัน</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Company Info */}
|
||||
<section className="py-16 bg-gray-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-2xl font-bold text-center mb-8 text-gray-900">ข้อมูลบริษัท</h2>
|
||||
<div className="bg-white rounded-2xl p-8 shadow-md">
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h3 className="font-bold text-lg text-gray-900 mb-4">บริษัท มอร์มินิมอร์ จำกัด</h3>
|
||||
<ul className="space-y-3 text-gray-600">
|
||||
<li className="flex items-start gap-3">
|
||||
<svg className="w-5 h-5 text-purple-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||||
<span>53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว<br/>สมุทรสาคร 74120</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<svg className="w-5 h-5 text-purple-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
|
||||
<a href="tel:0809955945" className="hover:text-purple-600">080-995-5945</a>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<svg className="w-5 h-5 text-purple-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
|
||||
<a href="mailto:contact@moreminimore.com" className="hover:text-purple-600">contact@moreminimore.com</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-lg text-gray-900 mb-4">บริการของเรา</h3>
|
||||
<ul className="space-y-2 text-gray-600">
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 bg-purple-500 rounded-full"></span>
|
||||
รับทำเว็บไซต์
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 bg-purple-500 rounded-full"></span>
|
||||
AI Chatbot
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 bg-purple-500 rounded-full"></span>
|
||||
Marketing Automation
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 bg-purple-500 rounded-full"></span>
|
||||
SEO ติดอันดับ Google
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 bg-purple-500 rounded-full"></span>
|
||||
ที่ปรึกษาด้านเทคโนโลยี
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-20 bg-primary">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-gray-900">
|
||||
พร้อมร่วมงานกับคุณแล้วหรือยัง?
|
||||
</h2>
|
||||
<p className="text-gray-900/70 mb-8 max-w-xl mx-auto">
|
||||
เริ่มต้นง่ายๆ แค่โทรหาหรือเพิ่ม LINE มาคุยกันก่อน ไม่มีค่าใช้จ่าย!
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="tel:0809955945" className="bg-gray-900 text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-800 transition-all hover:scale-105 shadow-xl flex items-center justify-center gap-2">
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
|
||||
</svg>
|
||||
080-995-5945
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" className="bg-white text-gray-900 px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all hover:scale-105 shadow-xl flex items-center justify-center gap-2">
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
|
||||
</svg>
|
||||
เพิ่ม Line
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
65
src/app/(frontend)/api/consent/route.ts
Normal file
65
src/app/(frontend)/api/consent/route.ts
Normal file
@@ -0,0 +1,65 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
import { getPayload } from 'payload'
|
||||
import config from '@payload-config'
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json()
|
||||
|
||||
const {
|
||||
action,
|
||||
purpose,
|
||||
analytics,
|
||||
marketing,
|
||||
functional,
|
||||
previousConsent,
|
||||
newConsent,
|
||||
} = body
|
||||
|
||||
// Get IP address
|
||||
const ip = request.headers.get('x-forwarded-for')?.split(',')[0] ||
|
||||
request.headers.get('x-real-ip') ||
|
||||
'unknown'
|
||||
|
||||
// Get User Agent
|
||||
const userAgent = request.headers.get('user-agent') || 'unknown'
|
||||
|
||||
// Get Payload CMS instance
|
||||
const payload = await getPayload({ config })
|
||||
|
||||
// Create consent log document
|
||||
const doc = await payload.create({
|
||||
collection: 'consent-logs',
|
||||
data: {
|
||||
action: action || 'update',
|
||||
purpose: purpose || 'all',
|
||||
analytics: analytics || false,
|
||||
marketing: marketing || false,
|
||||
functional: functional ?? true,
|
||||
userAgent,
|
||||
ip,
|
||||
timestamp: new Date().toISOString(),
|
||||
previousConsent: previousConsent || null,
|
||||
newConsent: newConsent || null,
|
||||
},
|
||||
})
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
doc,
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Error creating consent log:', error)
|
||||
return NextResponse.json(
|
||||
{ success: false, error: 'Failed to create consent log' },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export async function GET() {
|
||||
return NextResponse.json(
|
||||
{ error: 'Method not allowed. Use POST to submit consent.' },
|
||||
{ status: 405 }
|
||||
)
|
||||
}
|
||||
310
src/app/(frontend)/blog/[slug]/page.tsx
Normal file
310
src/app/(frontend)/blog/[slug]/page.tsx
Normal file
@@ -0,0 +1,310 @@
|
||||
import { Metadata } from 'next'
|
||||
import { notFound } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import { getPayload } from 'payload'
|
||||
import config from '@payload-config'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{
|
||||
slug: string
|
||||
}>
|
||||
}
|
||||
|
||||
async function getPost(slug: string) {
|
||||
try {
|
||||
const payload = await getPayload({ config })
|
||||
const result = await payload.find({
|
||||
collection: 'posts',
|
||||
where: {
|
||||
slug: {
|
||||
equals: slug,
|
||||
},
|
||||
},
|
||||
depth: 2,
|
||||
})
|
||||
return result.docs[0] || null
|
||||
} catch (error) {
|
||||
console.error('Error fetching post:', error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
async function getRelatedPosts(currentPostId: string | number, category?: string) {
|
||||
try {
|
||||
const payload = await getPayload({ config })
|
||||
const result = await payload.find({
|
||||
collection: 'posts',
|
||||
where: category ? {
|
||||
and: [
|
||||
{
|
||||
id: {
|
||||
not_equals: currentPostId,
|
||||
},
|
||||
},
|
||||
{
|
||||
category: {
|
||||
equals: category,
|
||||
},
|
||||
},
|
||||
],
|
||||
} : {
|
||||
id: {
|
||||
not_equals: currentPostId,
|
||||
},
|
||||
},
|
||||
limit: 3,
|
||||
depth: 1,
|
||||
})
|
||||
return result.docs
|
||||
} catch (error) {
|
||||
console.error('Error fetching related posts:', error)
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
|
||||
const { slug } = await params
|
||||
const post = await getPost(slug)
|
||||
|
||||
if (!post) {
|
||||
return {
|
||||
title: 'ไม่พบบทความ | MoreminiMore',
|
||||
}
|
||||
}
|
||||
|
||||
const title = typeof post.title === 'string' ? post.title : 'บทความ'
|
||||
const description = typeof post.description === 'string' ? post.description : ''
|
||||
|
||||
return {
|
||||
title: `${title} | MoreminiMore`,
|
||||
description,
|
||||
openGraph: {
|
||||
title: `${title} | MoreminiMore`,
|
||||
description,
|
||||
type: 'article',
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export default async function BlogPostPage({ params }: PageProps) {
|
||||
const { slug } = await params
|
||||
const post = await getPost(slug)
|
||||
|
||||
if (!post) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
const category = typeof post.category === 'string' ? post.category : undefined
|
||||
const relatedPosts = await getRelatedPosts(post.id, category)
|
||||
|
||||
const title = typeof post.title === 'string' ? post.title : 'บทความ'
|
||||
const description = typeof post.description === 'string' ? post.description : ''
|
||||
const content = typeof post.content === 'string' ? post.content : ''
|
||||
const author = typeof post.author === 'object' && post.author !== null ? (post.author as { name?: string }).name : 'ทีมงาน MoreminiMore'
|
||||
const publishedDate = post.publishedDate ? new Date(post.publishedDate) : new Date()
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<section id="hero" className="relative overflow-hidden min-h-[40vh] flex items-center reveal">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-accent-purple-600 via-accent-purple-500 to-accent-purple-700">
|
||||
<div className="absolute top-20 left-10 w-72 h-72 bg-white/20 rounded-full blur-3xl animate-float-1"></div>
|
||||
<div className="absolute bottom-20 right-10 w-96 h-96 bg-purple-300/20 rounded-full blur-3xl animate-float-2"></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10 py-16">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Breadcrumb */}
|
||||
<nav className="mb-4 text-white/80 text-sm">
|
||||
<Link href="/blog" className="hover:text-white transition-colors">บล็อก</Link>
|
||||
<span className="mx-2">/</span>
|
||||
<span>{title}</span>
|
||||
</nav>
|
||||
|
||||
{category && (
|
||||
<span className="inline-block bg-white/20 text-white px-4 py-1 rounded-full text-sm font-medium mb-4">
|
||||
{category}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight mb-4">
|
||||
{title}
|
||||
</h1>
|
||||
|
||||
{/* Meta Info */}
|
||||
<div className="flex flex-wrap items-center text-white/80 text-sm gap-4">
|
||||
<span className="flex items-center">
|
||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
||||
</svg>
|
||||
{author}
|
||||
</span>
|
||||
<span className="flex items-center">
|
||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
{publishedDate.toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Content Section */}
|
||||
<section id="content" className="py-16 bg-white reveal">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Featured Image Placeholder */}
|
||||
<div className="relative h-64 md:h-96 bg-gradient-to-br from-purple-100 to-purple-200 rounded-2xl overflow-hidden mb-12">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<svg className="w-24 h-24 text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Article Content */}
|
||||
<article className="prose prose-lg max-w-none">
|
||||
<div
|
||||
className="text-gray-700 leading-relaxed whitespace-pre-wrap"
|
||||
style={{
|
||||
fontFamily: 'var(--font-noto), system-ui, sans-serif',
|
||||
lineHeight: '1.8',
|
||||
}}
|
||||
>
|
||||
{content.split('\n').map((paragraph, index) => {
|
||||
const trimmed = paragraph.trim()
|
||||
if (!trimmed) return <br key={index} />
|
||||
|
||||
// Headers
|
||||
if (trimmed.startsWith('# ')) {
|
||||
return <h1 key={index} className="text-3xl font-bold text-gray-900 mt-8 mb-4" style={{ fontFamily: 'var(--font-kanit), system-ui, sans-serif' }}>{trimmed.slice(2)}</h1>
|
||||
}
|
||||
if (trimmed.startsWith('## ')) {
|
||||
return <h2 key={index} className="text-2xl font-bold text-gray-900 mt-8 mb-4" style={{ fontFamily: 'var(--font-kanit), system-ui, sans-serif' }}>{trimmed.slice(3)}</h2>
|
||||
}
|
||||
if (trimmed.startsWith('### ')) {
|
||||
return <h3 key={index} className="text-xl font-bold text-gray-900 mt-6 mb-3" style={{ fontFamily: 'var(--font-kanit), system-ui, sans-serif' }}>{trimmed.slice(4)}</h3>
|
||||
}
|
||||
|
||||
// Bold text
|
||||
if (trimmed.startsWith('**') && trimmed.endsWith('**')) {
|
||||
return <p key={index} className="font-bold text-gray-800 my-4">{trimmed.slice(2, -2)}</p>
|
||||
}
|
||||
|
||||
// List items
|
||||
if (trimmed.startsWith('- ')) {
|
||||
return <li key={index} className="ml-6 my-2">{trimmed.slice(2)}</li>
|
||||
}
|
||||
|
||||
// Regular paragraphs - check for inline bold
|
||||
const parts = trimmed.split(/(\*\*[^*]+\*\*)/g)
|
||||
if (parts.length > 1) {
|
||||
return (
|
||||
<p key={index} className="my-4">
|
||||
{parts.map((part, i) => {
|
||||
if (part.startsWith('**') && part.endsWith('**')) {
|
||||
return <strong key={i} className="font-bold">{part.slice(2, -2)}</strong>
|
||||
}
|
||||
return part
|
||||
})}
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
return <p key={index} className="my-4">{trimmed}</p>
|
||||
})}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Tags */}
|
||||
{post.tags && Array.isArray(post.tags) && post.tags.length > 0 && (
|
||||
<div className="mt-12 pt-8 border-t border-gray-200">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{post.tags.map((tag, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="bg-purple-50 text-purple-700 px-4 py-2 rounded-full text-sm font-medium"
|
||||
>
|
||||
#{typeof tag === 'string' ? tag : String(tag)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Related Posts Section */}
|
||||
{relatedPosts.length > 0 && (
|
||||
<section id="related" className="py-16 bg-gray-50 reveal">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-8 text-center" style={{ fontFamily: 'var(--font-kanit), system-ui, sans-serif' }}>
|
||||
บทความที่เกี่ยวข้อง
|
||||
</h2>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{relatedPosts.map((relatedPost) => {
|
||||
const relatedTitle = typeof relatedPost.title === 'string' ? relatedPost.title : 'บทความ'
|
||||
const relatedDescription = typeof relatedPost.description === 'string' ? relatedPost.description : ''
|
||||
|
||||
return (
|
||||
<article
|
||||
key={relatedPost.id}
|
||||
className="group bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-500"
|
||||
>
|
||||
<div className="relative h-40 bg-gradient-to-br from-purple-100 to-purple-200 overflow-hidden">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<svg className="w-12 h-12 text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-5">
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-2 group-hover:text-purple-600 transition-colors line-clamp-2">
|
||||
{relatedTitle}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm mb-4 line-clamp-2">
|
||||
{relatedDescription}
|
||||
</p>
|
||||
<Link
|
||||
href={`/blog/${relatedPost.slug}`}
|
||||
className="inline-flex items-center text-purple-600 font-medium hover:text-purple-800 transition-colors text-sm"
|
||||
>
|
||||
อ่านเพิ่มเติม
|
||||
<svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Back to Blog CTA */}
|
||||
<section className="py-12 bg-primary reveal">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<Link
|
||||
href="/blog"
|
||||
className="inline-flex items-center bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-900 transition-colors"
|
||||
>
|
||||
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
|
||||
</svg>
|
||||
กลับไปหน้าบล็อก
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
188
src/app/(frontend)/blog/page.tsx
Normal file
188
src/app/(frontend)/blog/page.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
import { Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
import { getPayload } from 'payload'
|
||||
import config from '@payload-config'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'บล็อก | MoreminiMore - ความรู้เรื่อง AI และ Digital Marketing',
|
||||
description: 'บทความและความรู้เรื่อง AI, SEO, Marketing Automation และเทคโนโลยีสำหรับ SMEs ไทย',
|
||||
keywords: 'บล็อก, AI, SEO, Marketing Automation, Digital Marketing, SMEs ไทย',
|
||||
openGraph: {
|
||||
title: 'บล็อก | MoreminiMore - ความรู้เรื่อง AI และ Digital Marketing',
|
||||
description: 'บทความและความรู้เรื่อง AI, SEO, Marketing Automation และเทคโนโลยีสำหรับ SMEs ไทย',
|
||||
url: 'https://moreminimore.com/blog',
|
||||
siteName: 'MoreminiMore',
|
||||
locale: 'th_TH',
|
||||
type: 'website',
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: 'บล็อก | MoreminiMore - ความรู้เรื่อง AI และ Digital Marketing',
|
||||
description: 'บทความและความรู้เรื่อง AI, SEO, Marketing Automation และเทคโนโลยีสำหรับ SMEs ไทย',
|
||||
},
|
||||
alternates: {
|
||||
canonical: 'https://moreminimore.com/blog',
|
||||
},
|
||||
}
|
||||
|
||||
async function getPosts() {
|
||||
try {
|
||||
const payload = await getPayload({ config })
|
||||
const posts = await payload.find({
|
||||
collection: 'posts',
|
||||
depth: 1,
|
||||
limit: 100,
|
||||
})
|
||||
return posts.docs
|
||||
} catch (error) {
|
||||
console.error('Error fetching posts:', error)
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
export default async function BlogPage() {
|
||||
const posts = await getPosts()
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<section id="hero" className="relative overflow-hidden min-h-[50vh] flex items-center reveal">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-accent-purple-600 via-accent-purple-500 to-accent-purple-700">
|
||||
<div className="absolute top-20 left-10 w-72 h-72 bg-white/20 rounded-full blur-3xl animate-float-1"></div>
|
||||
<div className="absolute bottom-20 right-10 w-96 h-96 bg-purple-300/20 rounded-full blur-3xl animate-float-2"></div>
|
||||
<div className="absolute top-1/3 left-1/4 w-48 h-48 bg-white/10 rounded-full blur-2xl animate-float-3"></div>
|
||||
<div className="absolute bottom-1/3 right-1/4 w-64 h-64 bg-purple-200/20 rounded-full blur-2xl animate-float-1" style={{ animationDelay: '1.5s' }}></div>
|
||||
</div>
|
||||
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div className="absolute top-1/4 left-[10%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-1"></div>
|
||||
<div className="absolute top-1/3 left-[80%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2"></div>
|
||||
<div className="absolute top-2/3 left-[20%] w-4 h-4 bg-white/20 rounded-full animate-float-dot-3"></div>
|
||||
<div className="absolute bottom-1/4 left-[70%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-1" style={{ animationDelay: '2s' }}></div>
|
||||
</div>
|
||||
|
||||
<div className="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: 'linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px)', backgroundSize: '50px 50px' }}></div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10 py-20">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight animate-fade-in-up">
|
||||
บล็อกของเรา
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-white/80 max-w-2xl mx-auto animate-fade-in-up" style={{ animationDelay: '0.2s' }}>
|
||||
ความรู้และข่าวสารเกี่ยวกับ AI, การตลาดอัตโนมัติ และการพัฒนาธุรกิจ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Blog Grid Section */}
|
||||
<section id="blog" className="py-20 bg-gradient-to-b from-gray-50 to-white reveal">
|
||||
<div className="container mx-auto px-4">
|
||||
{posts.length === 0 ? (
|
||||
<div className="text-center py-16">
|
||||
<svg className="w-16 h-16 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
|
||||
</svg>
|
||||
<h3 className="text-xl font-bold text-gray-800 mb-2">ยังไม่มีบทความ</h3>
|
||||
<p className="text-gray-600">กรุณากลับมาเยี่ยมชมใหม่ในเร็วๆ นี้</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
|
||||
{posts.map((post, index) => (
|
||||
<article
|
||||
key={post.id}
|
||||
className="group bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-500 reveal"
|
||||
style={{ animationDelay: `${index * 0.1}s` }}
|
||||
>
|
||||
{/* Featured Image Placeholder */}
|
||||
<div className="relative h-48 bg-gradient-to-br from-purple-100 to-purple-200 overflow-hidden">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<svg className="w-16 h-16 text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
{/* Category Badge */}
|
||||
{post.category && (
|
||||
<span className="absolute top-4 left-4 bg-white/90 backdrop-blur-sm text-purple-700 px-3 py-1 rounded-full text-sm font-semibold">
|
||||
{post.category}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
<h2 className="text-xl font-bold text-gray-800 mb-2 group-hover:text-purple-600 transition-colors line-clamp-2">
|
||||
{typeof post.title === 'string' ? post.title : 'Untitled'}
|
||||
</h2>
|
||||
<p className="text-gray-600 text-sm mb-4 line-clamp-3">
|
||||
{typeof post.description === 'string' ? post.description : ''}
|
||||
</p>
|
||||
|
||||
{/* Meta Info */}
|
||||
<div className="flex items-center text-sm text-gray-500 mb-4">
|
||||
{post.author && (
|
||||
<span className="flex items-center">
|
||||
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
||||
</svg>
|
||||
{typeof post.author === 'object' && post.author !== null ? (post.author as { name?: string }).name || 'ทีมงาน MoreminiMore' : 'ทีมงาน MoreminiMore'}
|
||||
</span>
|
||||
)}
|
||||
{post.publishedDate && (
|
||||
<span className="flex items-center ml-4">
|
||||
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
{new Date(post.publishedDate).toLocaleDateString('th-TH', { year: 'numeric', month: 'short', day: 'numeric' })}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Read More Link */}
|
||||
<Link
|
||||
href={`/blog/${post.slug}`}
|
||||
className="inline-flex items-center text-purple-600 font-medium hover:text-purple-800 transition-colors"
|
||||
>
|
||||
อ่านเพิ่มเติม
|
||||
<svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section id="cta" className="py-20 bg-primary reveal">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-6 text-black">
|
||||
อยากรู้ว่า AI ช่วยธุรกิจคุณได้อย่างไร?
|
||||
</h2>
|
||||
<p className="text-lg text-gray-800 mb-8">
|
||||
ปรึกษาฟรี! เราพร้อมวิเคราะห์และแนะนำโซลูชันที่เหมาะกับธุรกิจของคุณ
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link href="/contact-us" className="bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-900 transition-colors inline-flex items-center justify-center">
|
||||
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
|
||||
</svg>
|
||||
ปรึกษาฟรี
|
||||
</Link>
|
||||
<Link href="tel:0809955945" className="bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-colors inline-flex items-center justify-center">
|
||||
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
||||
</svg>
|
||||
080-995-5945
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
31
src/app/(frontend)/contact-us/layout.tsx
Normal file
31
src/app/(frontend)/contact-us/layout.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'ติดต่อเรา | MoreminiMore - ปรึกษาฟรี ไม่มีค่าใช้จ่าย',
|
||||
description: 'ติดต่อบริษัท มอร์มินิมอร์ จำกัด ปรึกษาฟรี ไม่มีค่าใช้จ่าย โทร 080-995-5945',
|
||||
keywords: 'ติดต่อ, ปรึกษา, LINE, โทรศัพท์, อีเมล, MoreminiMore',
|
||||
openGraph: {
|
||||
title: 'ติดต่อเรา | MoreminiMore - ปรึกษาฟรี ไม่มีค่าใช้จ่าย',
|
||||
description: 'ติดต่อบริษัท มอร์มินิมอร์ จำกัด ปรึกษาฟรี ไม่มีค่าใช้จ่าย โทร 080-995-5945',
|
||||
url: 'https://moreminimore.com/contact-us',
|
||||
siteName: 'MoreminiMore',
|
||||
locale: 'th_TH',
|
||||
type: 'website',
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: 'ติดต่อเรา | MoreminiMore - ปรึกษาฟรี ไม่มีค่าใช้จ่าย',
|
||||
description: 'ติดต่อบริษัท มอร์มินิมอร์ จำกัด ปรึกษาฟรี ไม่มีค่าใช้จ่าย โทร 080-995-5945',
|
||||
},
|
||||
alternates: {
|
||||
canonical: 'https://moreminimore.com/contact-us',
|
||||
},
|
||||
}
|
||||
|
||||
export default function ContactUsLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return children
|
||||
}
|
||||
320
src/app/(frontend)/contact-us/page.tsx
Normal file
320
src/app/(frontend)/contact-us/page.tsx
Normal file
@@ -0,0 +1,320 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default function ContactUsPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
company: '',
|
||||
message: '',
|
||||
})
|
||||
const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle')
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value,
|
||||
})
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setStatus('loading')
|
||||
|
||||
try {
|
||||
// In a real implementation, this would submit to an API endpoint
|
||||
// For now, we simulate a successful submission
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
|
||||
// Simulate API call
|
||||
// await fetch('/api/contact', {
|
||||
// method: 'POST',
|
||||
// headers: { 'Content-Type': 'application/json' },
|
||||
// body: JSON.stringify(formData),
|
||||
// })
|
||||
|
||||
setStatus('success')
|
||||
setFormData({ name: '', email: '', phone: '', company: '', message: '' })
|
||||
} catch (error) {
|
||||
setStatus('error')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="flex-grow">
|
||||
{/* Hero Section */}
|
||||
<section className="py-20 bg-gradient-to-br from-yellow-400 via-yellow-500 to-yellow-600 relative overflow-hidden">
|
||||
{/* Floating Shapes */}
|
||||
<div className="absolute top-20 left-10 w-72 h-72 bg-white/20 rounded-full blur-3xl animate-float-1"></div>
|
||||
<div className="absolute bottom-20 right-10 w-96 h-96 bg-yellow-300/20 rounded-full blur-3xl animate-float-2"></div>
|
||||
<div className="absolute top-1/3 left-1/4 w-48 h-48 bg-white/10 rounded-full blur-2xl animate-float-3"></div>
|
||||
|
||||
{/* Grid Pattern */}
|
||||
<div className="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: 'linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px)', backgroundSize: '50px 50px' }}></div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight">
|
||||
ติดต่อเรา
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-white/80 max-w-2xl mx-auto">
|
||||
พร้อมให้คำปรึกษาและช่วยเหลือคุณ ติดต่อได้หลายช่องทาง
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Methods */}
|
||||
<section className="py-20 bg-gradient-to-b from-gray-50 to-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
||||
|
||||
{/* Phone */}
|
||||
<a href="tel:0809955945" className="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 text-center">
|
||||
<div className="w-16 h-16 bg-yellow-500 rounded-2xl flex items-center justify-center mx-auto mb-5 group-hover:bg-yellow-400 transition-colors">
|
||||
<svg className="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-gray-800">โทรศัพท์</h3>
|
||||
<p className="text-2xl font-bold text-orange-600 mb-2">080-995-5945</p>
|
||||
<p className="text-sm text-gray-500">จันทร์-ศุกร์ 9:00-18:00 น.</p>
|
||||
</a>
|
||||
|
||||
{/* LINE */}
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" className="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 text-center">
|
||||
<div className="w-16 h-16 bg-[#06C755] rounded-2xl flex items-center justify-center mx-auto mb-5 group-hover:bg-[#05B548] transition-colors">
|
||||
<svg className="w-8 h-8 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-gray-800">LINE</h3>
|
||||
<p className="text-lg font-bold text-[#06C755]">@539hdlul</p>
|
||||
<p className="text-sm text-gray-500 mt-2">คลิกเพื่อเพิ่มเพื่อน</p>
|
||||
</a>
|
||||
|
||||
{/* Email */}
|
||||
<a href="mailto:contact@moreminimore.com" className="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 text-center">
|
||||
<div className="w-16 h-16 bg-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-5 group-hover:bg-blue-400 transition-colors">
|
||||
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-gray-800">อีเมล</h3>
|
||||
<p className="text-lg font-bold text-blue-700">contact@moreminimore.com</p>
|
||||
<p className="text-sm text-gray-500 mt-2">ตอบกลับภายใน 24 ชม.</p>
|
||||
</a>
|
||||
|
||||
{/* Facebook */}
|
||||
<a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" className="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 text-center">
|
||||
<div className="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-5 group-hover:bg-blue-500 transition-colors">
|
||||
<svg className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-gray-800">Facebook</h3>
|
||||
<p className="text-lg font-bold text-blue-700">moreminimore</p>
|
||||
<p className="text-sm text-gray-500 mt-2">Message ได้ตลอด 24 ชม.</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Form */}
|
||||
<section className="py-20 bg-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-4 text-gray-900">ส่งข้อความถึงเรา</h2>
|
||||
<p className="text-gray-600 text-center mb-8">กรอกแบบฟอร์มด้านล่างแล้วเราจะติดต่อกลับโดยเร็วที่สุด</p>
|
||||
|
||||
{status === 'success' ? (
|
||||
<div className="bg-green-50 border border-green-200 rounded-xl p-8 text-center">
|
||||
<svg className="w-16 h-16 text-green-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<h3 className="text-xl font-bold text-green-800 mb-2">ส่งข้อความสำเร็จ!</h3>
|
||||
<p className="text-green-700 mb-4">ขอบคุณที่ติดต่อเรา เราจะตอบกลับภายใน 24 ชั่วโมง</p>
|
||||
<button
|
||||
onClick={() => setStatus('idle')}
|
||||
className="text-green-700 font-medium hover:underline"
|
||||
>
|
||||
ส่งข้อความอื่น
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="bg-gray-50 rounded-2xl p-8">
|
||||
{status === 'error' && (
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
|
||||
<p className="text-red-700">เกิดข้อผิดพลาด กรุณาลองอีกครั้ง หรือติดต่อเราทางช่องทางอื่น</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6 mb-6">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
ชื่อ-นามสกุล <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent transition"
|
||||
placeholder="กรุณากรอกชื่อ-นามสกุล"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
อีเมล <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent transition"
|
||||
placeholder="example@email.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6 mb-6">
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
โทรศัพท์
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent transition"
|
||||
placeholder="08x-xxx-xxxx"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="company" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
ชื่อบริษัท/องค์กร
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="company"
|
||||
name="company"
|
||||
value={formData.company}
|
||||
onChange={handleChange}
|
||||
className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent transition"
|
||||
placeholder="ชื่อบริษัทของคุณ (ถ้ามี)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
ข้อความ <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
required
|
||||
rows={5}
|
||||
className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent transition resize-none"
|
||||
placeholder="กรุณากรอกรายละเอียดที่ต้องการติดต่อ..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={status === 'loading'}
|
||||
className="w-full bg-primary text-black font-bold py-4 px-8 rounded-full hover:bg-primary-hover transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||
>
|
||||
{status === 'loading' ? (
|
||||
<>
|
||||
<svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||||
</svg>
|
||||
กำลังส่ง...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
ส่งข้อความ
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<p className="text-sm text-gray-500 text-center mt-4">
|
||||
หรือติดต่อเราโดยตรงที่ <a href="mailto:contact@moreminimore.com" className="text-accent-blue hover:underline">contact@moreminimore.com</a>
|
||||
</p>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Working Hours */}
|
||||
<section className="py-16 bg-gray-50">
|
||||
<div className="container mx-auto px-4 max-w-2xl">
|
||||
<div className="bg-white rounded-2xl p-8 shadow-md">
|
||||
<h2 className="text-2xl font-bold mb-6 text-gray-800 text-center">เวลาทำการ</h2>
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center py-2 border-b border-gray-200">
|
||||
<span className="text-gray-600">จันทร์ - ศุกร์</span>
|
||||
<span className="font-bold text-orange-600">09:00 - 18:00 น.</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center py-2 border-b border-gray-200">
|
||||
<span className="text-gray-600">เสาร์</span>
|
||||
<span className="font-bold text-orange-600">10:00 - 16:00 น.</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-gray-600">อาทิตย์</span>
|
||||
<span className="font-bold text-gray-400">ปิดทำการ</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 mt-6 text-center">* นอกเหนือเวลาทำการ สามารถติดต่อทาง LINE ได้ตลอด 24 ชั่วโมง</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-20 bg-primary">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-6 text-black">
|
||||
พร้อมเริ่มต้นทำงานกับเราแล้วหรือยัง?
|
||||
</h2>
|
||||
<p className="text-xl mb-8 max-w-2xl mx-auto text-black">
|
||||
ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราพร้อมช่วยเหลือคุณ
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="tel:0809955945" className="group bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-black/80 transition-all duration-300 hover:scale-105 shadow-2xl inline-flex items-center justify-center gap-3">
|
||||
<svg className="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
|
||||
</svg>
|
||||
080-995-5945
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" className="group bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 shadow-2xl inline-flex items-center justify-center gap-3">
|
||||
<svg className="w-5 h-5 group-hover:animate-bounce" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
|
||||
</svg>
|
||||
ติดต่อทาง LINE
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
222
src/app/(frontend)/cookie-policy/page.tsx
Normal file
222
src/app/(frontend)/cookie-policy/page.tsx
Normal file
@@ -0,0 +1,222 @@
|
||||
import type { Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'นโยบายคุกกี้ | MoreminiMore',
|
||||
description: 'นโยบายการใช้คุกกี้ของเว็บไซต์ moreminimore.com',
|
||||
keywords: 'นโยบายคุกกี้, Cookie, PDPA, MoreminiMore',
|
||||
openGraph: {
|
||||
title: 'นโยบายคุกกี้ | MoreminiMore',
|
||||
description: 'นโยบายการใช้คุกกี้ของเว็บไซต์ moreminimore.com',
|
||||
url: 'https://moreminimore.com/cookie-policy',
|
||||
siteName: 'MoreminiMore',
|
||||
locale: 'th_TH',
|
||||
type: 'website',
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: 'นโยบายคุกกี้ | MoreminiMore',
|
||||
description: 'นโยบายการใช้คุกกี้ของเว็บไซต์ moreminimore.com',
|
||||
},
|
||||
alternates: {
|
||||
canonical: 'https://moreminimore.com/cookie-policy',
|
||||
},
|
||||
}
|
||||
|
||||
export default function CookiePolicyPage() {
|
||||
return (
|
||||
<main className="flex-grow">
|
||||
{/* Hero Section */}
|
||||
<section className="py-20 bg-gradient-to-br from-yellow-50 to-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-center mb-12 text-gray-900">
|
||||
นโยบายคุกกี้
|
||||
</h1>
|
||||
|
||||
<div className="max-w-4xl mx-auto bg-white rounded-lg shadow-md p-8">
|
||||
{/* Document Info */}
|
||||
<div className="bg-yellow-50 rounded-lg p-6 mb-8 border border-yellow-200">
|
||||
<p className="text-gray-700 text-base">
|
||||
<strong>ชื่อเว็บไซต์:</strong> MoreminiMore<br />
|
||||
<strong>ผู้ควบคุมข้อมูล:</strong> บริษัท มอร์มินิมอร์ จำกัด<br />
|
||||
<strong>มีผลบังคับใช้วันที่:</strong> 1 มีนาคม 2569<br />
|
||||
<strong>แก้ไขล่าสุด:</strong> 1 เมษายน 2569
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Table of Contents */}
|
||||
<div className="bg-yellow-50 rounded-lg p-6 mb-8 border border-yellow-200">
|
||||
<h2 className="text-xl font-bold mb-4 text-gray-900">สารบัญ</h2>
|
||||
<nav className="space-y-2">
|
||||
<a href="#section-1" className="block text-gray-700 hover:text-accent-blue transition-colors">1. คุกกี้คืออะไร?</a>
|
||||
<a href="#section-2" className="block text-gray-700 hover:text-accent-blue transition-colors">2. ประเภทของคุกกี้ที่เราใช้</a>
|
||||
<a href="#section-3" className="block text-gray-700 hover:text-accent-blue transition-colors">3. คุกกี้ที่จำเป็น (Necessary)</a>
|
||||
<a href="#section-4" className="block text-gray-700 hover:text-accent-blue transition-colors">4. คุกกี้เพื่อประสิทธิภาพ (Performance)</a>
|
||||
<a href="#section-5" className="block text-gray-700 hover:text-accent-blue transition-colors">5. คุกกี้เพื่อการทำงาน (Functional)</a>
|
||||
<a href="#section-6" className="block text-gray-700 hover:text-accent-blue transition-colors">6. คุกกี้เพื่อการตลาด (Marketing)</a>
|
||||
<a href="#section-7" className="block text-gray-700 hover:text-accent-blue transition-colors">7. การจัดการคุกกี้</a>
|
||||
<a href="#section-8" className="block text-gray-700 hover:text-accent-blue transition-colors">8. การเปลี่ยนแปลงนโยบาย</a>
|
||||
<a href="#section-9" className="block text-gray-700 hover:text-accent-blue transition-colors">9. การติดต่อ</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Section 1: What are Cookies */}
|
||||
<h2 id="section-1" className="text-2xl font-bold mb-4 text-gray-900 mt-8">1. คุกกี้คืออะไร?</h2>
|
||||
<p className="mb-6 text-gray-600">
|
||||
คุกกี้ (Cookies) คือไฟล์ข้อความขนาดเล็กที่เว็บไซต์ส่งไปเก็บไว้ในอุปกรณ์ของท่าน (คอมพิวเตอร์, สมาร์ทโฟน, หรือแท็บเล็ต) เมื่อท่านเข้าชมเว็บไซต์ คุกกี้ช่วยให้เว็บไซต์จดจำการตั้งค่าและการกระทำของท่านได้
|
||||
</p>
|
||||
<p className="mb-6 text-gray-600">
|
||||
คุกกี้ถูกใช้อย่างแพร่หลายเพื่อปรับปรุงประสบการณ์การใช้งานเว็บไซต์ เช่น จดจำการเข้าสู่ระบบ จดจำสินค้าในตะกร้า หรือปรับแต่งเนื้อหาตามความชอบของท่าน
|
||||
</p>
|
||||
|
||||
{/* Section 2: Types We Use */}
|
||||
<h2 id="section-2" className="text-2xl font-bold mb-4 text-gray-900 mt-8">2. ประเภทของคุกกี้ที่เราใช้</h2>
|
||||
<p className="mb-6 text-gray-600">
|
||||
เราใช้คุกกี้หลายประเภทบนเว็บไซต์ของเรา ซึ่งสามารถจำแนกได้ดังนี้:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>คุกกี้ที่จำเป็น (Necessary Cookies)</strong> - จำเป็นสำหรับการทำงานพื้นฐานของเว็บไซต์</li>
|
||||
<li><strong>คุกกี้เพื่อประสิทธิภาพ (Performance Cookies)</strong> - ช่วยวิเคราะห์และปรับปรุงการทำงานของเว็บไซต์</li>
|
||||
<li><strong>คุกกี้เพื่อการทำงาน (Functional Cookies)</strong> - จดจำการตั้งค่าของท่าน</li>
|
||||
<li><strong>คุกกี้เพื่อการตลาด (Marketing Cookies)</strong> - ติดตามกิจกรรมเพื่อแสดงโฆษณาที่เกี่ยวข้อง</li>
|
||||
</ul>
|
||||
|
||||
{/* Section 3: Necessary Cookies */}
|
||||
<h2 id="section-3" className="text-2xl font-bold mb-4 text-gray-900 mt-8">3. คุกกี้ที่จำเป็น (Necessary Cookies)</h2>
|
||||
<p className="mb-4 text-gray-600">
|
||||
คุกกี้ที่จำเป็นเป็นคุกกี้ที่ไม่สามารถปิดใช้งานได้ เนื่องจากจำเป็นสำหรับการทำงานพื้นฐานของเว็บไซต์ คุกกี้เหล่านี้ไม่เก็บข้อมูลส่วนบุคคลที่สามารถระบุตัวตนได้
|
||||
</p>
|
||||
<div className="bg-gray-50 rounded-lg p-4 mb-4">
|
||||
<p className="text-sm text-gray-600 mb-2"><strong>ตัวอย่าง:</strong></p>
|
||||
<ul className="list-disc pl-6 text-sm text-gray-600 space-y-1">
|
||||
<li>Session cookies - จดจำการเข้าสู่ระบบ</li>
|
||||
<li>Security cookies - รักษาความปลอดภัย</li>
|
||||
<li>load balancing cookies - กระจายภาระการทำงาน</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p className="mb-6 text-gray-600">
|
||||
<strong>หมายเหตุ:</strong> คุกกี้ประเภทนี้ไม่ต้องได้รับความยินยอมจากท่านตามกฎหมาย PDPA เนื่องจากจำเป็นสำหรับการให้บริการที่ท่านร้องขอโดยตรง
|
||||
</p>
|
||||
|
||||
{/* Section 4: Performance Cookies */}
|
||||
<h2 id="section-4" className="text-2xl font-bold mb-4 text-gray-900 mt-8">4. คุกกี้เพื่อประสิทธิภาพ (Performance Cookies)</h2>
|
||||
<p className="mb-4 text-gray-600">
|
||||
คุกกี้เพื่อประสิทธิภาพช่วยให้เราเข้าใจว่าผู้เข้าชมใช้งานเว็บไซต์ของเราอย่างไร โดยรวบรวมข้อมูลที่ไม่ระบุตัวตน เช่น หน้าที่เข้าชมบ่อยที่สุด เวลาที่ใช้บนเว็บไซต์ และข้อความแสดงข้อผิดพลาด
|
||||
</p>
|
||||
<div className="bg-gray-50 rounded-lg p-4 mb-4">
|
||||
<p className="text-sm text-gray-600 mb-2"><strong>บริการที่เราใช้:</strong></p>
|
||||
<ul className="list-disc pl-6 text-sm text-gray-600 space-y-1">
|
||||
<li><strong>Umami Analytics</strong> - ระบบวิเคราะห์เว็บไซต์ที่เน้นความเป็นส่วนตัว (Privacy-focused)</li>
|
||||
<li><strong>Google Analytics 4 (GA4)</strong> - หากท่านให้ความยินยอม</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p className="mb-6 text-gray-600">
|
||||
คุกกี้เหล่านี้ <strong>ต้องได้รับความยินยอม</strong>จากท่านก่อนการใช้งาน ท่านสามารถปฏิเสธได้โดยคลิก "ปฏิเสธทั้งหมด" บนแบนเนอร์คุกกี้ หรือจัดการการตั้งค่าได้ตลอดเวลา
|
||||
</p>
|
||||
|
||||
{/* Section 5: Functional Cookies */}
|
||||
<h2 id="section-5" className="text-2xl font-bold mb-4 text-gray-900 mt-8">5. คุกกี้เพื่อการทำงาน (Functional Cookies)</h2>
|
||||
<p className="mb-4 text-gray-600">
|
||||
คุกกี้เพื่อการทำงานช่วยจดจำการตั้งค่าและความชอบของท่าน เช่น ภาษาที่ใช้ ภูมิภาค หรือการกำหนดค่าต่างๆ บนเว็บไซต์
|
||||
</p>
|
||||
<div className="bg-gray-50 rounded-lg p-4 mb-4">
|
||||
<p className="text-sm text-gray-600 mb-2"><strong>ตัวอย่าง:</strong></p>
|
||||
<ul className="list-disc pl-6 text-sm text-gray-600 space-y-1">
|
||||
<li>จดจำการตั้งค่าภาษาไทย/อังกฤษ</li>
|
||||
<li>จดจำสินค้าที่เคยดู</li>
|
||||
<li>จดจำการตั้งค่าการแสดงผล</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p className="mb-6 text-gray-600">
|
||||
คุกกี้เหล่านี้ <strong>ต้องได้รับความยินยอม</strong> จากท่านก่อนการใช้งาน
|
||||
</p>
|
||||
|
||||
{/* Section 6: Marketing Cookies */}
|
||||
<h2 id="section-6" className="text-2xl font-bold mb-4 text-gray-900 mt-8">6. คุกกี้เพื่อการตลาด (Marketing Cookies)</h2>
|
||||
<p className="mb-4 text-gray-600">
|
||||
คุกกี้เพื่อการตลาดใช้เพื่อติดตามพฤติกรรมการท่องเว็บของท่าน เพื่อแสดงโฆษณาที่เกี่ยวข้องกับความสนใจของท่าน คุกกี้เหล่านี้อาจถูกใช้โดยพันธมิตรด้านโฆษณาของเรา
|
||||
</p>
|
||||
<div className="bg-gray-50 rounded-lg p-4 mb-4">
|
||||
<p className="text-sm text-gray-600 mb-2"><strong>วัตถุประสงค์:</strong></p>
|
||||
<ul className="list-disc pl-6 text-sm text-gray-600 space-y-1">
|
||||
<li>แสดงโฆษณาที่เกี่ยวข้องกับความสนใจของท่าน</li>
|
||||
<li>วัดประสิทธิภาพของแคมเปญโฆษณา</li>
|
||||
<li>จำกัดจำนวนครั้งที่เห็นโฆษณา</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p className="mb-6 text-gray-600">
|
||||
คุกกี้เหล่านี้ <strong>ต้องได้รับความยินยอม</strong> จากท่านก่อนการใช้งาน เราไม่ใช้คุกกี้เพื่อการตลาดโดยตรงบนเว็บไซต์นี้ แต่หากมีการใช้งาน ท่านจะได้รับแจ้งและสามารถให้ความยินยอมหรือปฏิเสธได้
|
||||
</p>
|
||||
|
||||
{/* Section 7: Managing Cookies */}
|
||||
<h2 id="section-7" className="text-2xl font-bold mb-4 text-gray-900 mt-8">7. การจัดการคุกกี้</h2>
|
||||
<p className="mb-4 text-gray-600">
|
||||
ท่านสามารถจัดการความยินยอมคุกกี้ได้หลายวิธี:
|
||||
</p>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">7.1 แบนเนอร์คุกกี้บนเว็บไซต์</h3>
|
||||
<p className="mb-4 text-gray-600">
|
||||
เมื่อท่านเข้าชมเว็บไซต์ครั้งแรก ท่านจะเห็นแบนเนอร์คุกกี้ที่ให้ท่านเลือก:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>ยอมรับทั้งหมด</strong> - อนุญาตคุกกี้ทุกประเภท</li>
|
||||
<li><strong>ปฏิเสธทั้งหมด</strong> - ปฏิเสธคุกกี้ที่ไม่จำเป็น</li>
|
||||
<li><strong>ตั้งค่าเอง</strong> - เลือกประเภทคุกกี้ที่ต้องการเป็นรายตัว</li>
|
||||
</ul>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">7.2 การเปลี่ยนแปลงการตั้งค่า</h3>
|
||||
<p className="mb-4 text-gray-600">
|
||||
ท่านสามารถเปลี่ยนแปลงการตั้งค่าคุกกี้ได้ตลอดเวลา โดย:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>ล้างข้อมูลคุกกี้ในเบราว์เซอร์ของท่าน</li>
|
||||
<li>เข้าชมเว็บไซต์อีกครั้งเพื่อแสดงแบนเนอร์คุกกี้ใหม่</li>
|
||||
<li>ติดต่อเราเพื่อขอลบข้อมูลคุกกี้ที่เราเก็บรวบรวม</li>
|
||||
</ul>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">7.3 การปิดใช้งานในเบราว์เซอร์</h3>
|
||||
<p className="mb-4 text-gray-600">
|
||||
ท่านสามารถปฏิเสธหรือบล็อกคุกกี้ได้โดยการเปลี่ยนแปลงการตั้งค่าในเบราว์เซอร์:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>Chrome:</strong> การตั้งค่า > ความเป็นส่วนตัวและการรักษาความปลอดภัย > คุกกี้</li>
|
||||
<li><strong>Firefox:</strong> การตั้งค่า > ความเป็นส่วนตัวและการรักษาความปลอดภัย</li>
|
||||
<li><strong>Safari:</strong> การตั้งค่า > ความเป็นส่วนตัว</li>
|
||||
<li><strong>Edge:</strong> การตั้งค่า > คุกกี้และการอนุญาตไซต์</li>
|
||||
</ul>
|
||||
<p className="mb-6 text-gray-600">
|
||||
<strong>หมายเหตุ:</strong> การปิดใช้งานคุกกี้อาจส่งผลกระทบต่อการทำงานของเว็บไซต์บางส่วน
|
||||
</p>
|
||||
|
||||
{/* Section 8: Policy Changes */}
|
||||
<h2 id="section-8" className="text-2xl font-bold mb-4 text-gray-900 mt-8">8. การเปลี่ยนแปลงนโยบาย</h2>
|
||||
<p className="mb-6 text-gray-600">
|
||||
เราอาจอัปเดตนโยบายคุกกี้นี้เป็นครั้งคราวเพื่อให้สอดคล้องกับการเปลี่ยนแปลงของเว็บไซต์หรือกฎหมาย การเปลี่ยนแปลงที่สำคัญจะถูกประกาศบนหน้านี้พร้อมวันที่อัปเดตใหม่
|
||||
</p>
|
||||
<p className="mb-6 text-gray-600">
|
||||
เราขอแนะนำให้ท่านตรวจสอบนโยบายนี้เป็นระยะเพื่อรับทราบการเปลี่ยนแปลง
|
||||
</p>
|
||||
|
||||
{/* Section 9: Contact */}
|
||||
<h2 id="section-9" className="text-2xl font-bold mb-4 text-gray-900 mt-8">9. การติดต่อ</h2>
|
||||
<p className="mb-4 text-gray-600">
|
||||
หากท่านมีคำถามเกี่ยวกับนโยบายคุกกี้นี้ กรุณาติดต่อเรา:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>อีเมล:</strong> <a href="mailto:contact@moreminimore.com" className="text-accent-blue hover:underline">contact@moreminimore.com</a></li>
|
||||
<li><strong>โทรศัพท์:</strong> <a href="tel:0809955945" className="text-accent-blue hover:underline">080-995-5945</a></li>
|
||||
<li><strong>ที่อยู่:</strong> 53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120</li>
|
||||
</ul>
|
||||
|
||||
{/* Footer Note */}
|
||||
<div className="mt-12 p-6 bg-yellow-50 border-l-4 border-primary rounded">
|
||||
<p className="text-gray-700 text-base">
|
||||
<strong>หมายเหตุ:</strong> นโยบายคุกกี้นี้เป็นส่วนหนึ่งของ <Link href="/privacy-policy" className="text-accent-blue hover:underline">นโยบายความเป็นส่วนตัว</Link> และ <Link href="/terms-of-service" className="text-accent-blue hover:underline">ข้อกำหนดและเงื่อนไข</Link> ของเรา
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
31
src/app/(frontend)/faq/layout.tsx
Normal file
31
src/app/(frontend)/faq/layout.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'คำถามที่พบบ่อย | MoreminiMore - FAQ',
|
||||
description: 'คำตอบสำหรับคำถามที่พบบ่อยเกี่ยวกับบริการรับทำเว็บไซต์ AI Chatbot และ Marketing Automation',
|
||||
keywords: 'FAQ, คำถามที่พบบ่อย, รับทำเว็บไซต์, AI Chatbot, Marketing Automation',
|
||||
openGraph: {
|
||||
title: 'คำถามที่พบบ่อย | MoreminiMore - FAQ',
|
||||
description: 'คำตอบสำหรับคำถามที่พบบ่อยเกี่ยวกับบริการรับทำเว็บไซต์ AI Chatbot และ Marketing Automation',
|
||||
url: 'https://moreminimore.com/faq',
|
||||
siteName: 'MoreminiMore',
|
||||
locale: 'th_TH',
|
||||
type: 'website',
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: 'คำถามที่พบบ่อย | MoreminiMore - FAQ',
|
||||
description: 'คำตอบสำหรับคำถามที่พบบ่อยเกี่ยวกับบริการรับทำเว็บไซต์ AI Chatbot และ Marketing Automation',
|
||||
},
|
||||
alternates: {
|
||||
canonical: 'https://moreminimore.com/faq',
|
||||
},
|
||||
}
|
||||
|
||||
export default function FAQLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return children
|
||||
}
|
||||
200
src/app/(frontend)/faq/page.tsx
Normal file
200
src/app/(frontend)/faq/page.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
|
||||
interface FAQItem {
|
||||
q: string
|
||||
a: string
|
||||
}
|
||||
|
||||
interface FAQCategory {
|
||||
category: string
|
||||
questions: FAQItem[]
|
||||
}
|
||||
|
||||
const faqs: FAQCategory[] = [
|
||||
{
|
||||
category: 'บริการ',
|
||||
questions: [
|
||||
{
|
||||
q: 'AI-Enhanced Website ต่างจากเว็บไซต์ทั่วไปอย่างไร?',
|
||||
a: 'AI-Enhanced Website จะผสาน AI Chatbot ที่ตอบคำถามลูกค้าอัตโนมัติ 24/7 พร้อมระบบ SEO ที่ช่วยให้เว็บติดอันดับ Google ได้ง่ายขึ้น และมีระบบวิเคราะห์พฤติกรรมผู้ใช้งานเพื่อปรับปรุงเว็บไซต์อย่างต่อเนื่อง'
|
||||
},
|
||||
{
|
||||
q: 'Marketing Automation ช่วยธุรกิจฉันได้อย่างไร?',
|
||||
a: 'ระบบจะช่วยให้คุณสื่อสารกับลูกค้าโดยอัตโนมัติ ผ่านหลายช่องทางเช่น LINE OA, Facebook Messenger, Email ช่วยลดงานซ้ำซ้อน เพิ่มการตอบสนองที่รวดเร็ว และติดตามผลการตลาดได้อย่างแม่นยำ'
|
||||
},
|
||||
{
|
||||
q: 'SEO + AI Content System ทำงานอย่างไร?',
|
||||
a: 'เราใช้ AI วิจัย Keyword ที่มีศักยภาพ สร้างคอนเทนต์คุณภาพที่ตรงใจกลุ่มเป้าหมาย และปรับแต่งให้ถูกใจ Google ช่วยให้เว็บติดอันดับการค้นหาอย่างยั่งยืน'
|
||||
},
|
||||
{
|
||||
q: 'Tech Consult จำเป็นสำหรับธุรกิจฉันไหม?',
|
||||
a: 'หากคุณกำลังวางแผนใช้เทคโนโลยีใหม่ ขยายระบบ หรือต้องการเลือกเครื่องมือที่เหมาะสมกับธุรกิจ การปรึกษาก่อนเริ่มโครงการจะช่วยประหยัดเวลาและงบประมาณได้มาก'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'กระบวนการทำงาน',
|
||||
questions: [
|
||||
{
|
||||
q: 'เริ่มต้นใช้บริการอย่างไร?',
|
||||
a: 'ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราจะพูดคุยความต้องการ ธุรกิจ และเป้าหมายของคุณ จากนั้นจึงแนะนำโซลูชันที่เหมาะสมที่สุด'
|
||||
},
|
||||
{
|
||||
q: 'ใช้เวลานานแค่ไหนถึงจะเห็นผล?',
|
||||
a: 'ขึ้นอยู่กับบริการ: เว็บไซต์ใช้เวลา 2-6 สัปดาห์, Marketing Automation เห็นผลใน 1-3 เดือน, SEO ใช้เวลา 3-6 เดือนในการติดอันดับ'
|
||||
},
|
||||
{
|
||||
q: 'มีบริการหลังการขายไหม?',
|
||||
a: 'มี! เราดูแลหลังการติดตั้ง อบรมการใช้งาน และพร้อมให้คำปรึกษาเมื่อคุณต้องการ'
|
||||
},
|
||||
{
|
||||
q: 'ต้องมีความรู้ทางเทคนิคไหม?',
|
||||
a: 'ไม่จำเป็น! เราดูแลทุกอย่างตั้งแต่ต้นจนจบ และอบรมทีมของคุณให้ใช้งานระบบได้อย่างมั่นใจ'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'ราคาและการชำระเงิน',
|
||||
questions: [
|
||||
{
|
||||
q: 'มี Package ไหนบ้าง?',
|
||||
a: 'เรามีหลาย Package ตั้งแต่เริ่มต้นหลักพัน ไปจนถึงโครงการใหญ่ ขึ้นอยู่กับความต้องการและขอบเขตงาน นอกจากนี้ยังมีบริการที่คิดเป็นรายเดือน (ที่ปรึกษา) ที่จะช่วยพัฒนาระบบได้เรื่อย ๆ ไม่จำกัดด้วย โดยราคาจะขึ้นอยู่กับขอบเขตและความยากของงาน เหมาะสำหรับลูกค้าที่มีความต้องการเปลี่ยนแปลงตลอดเวลา'
|
||||
},
|
||||
{
|
||||
q: 'มีบริการแบบรายเดือนไหม?',
|
||||
a: 'มี! บริการบางอย่างเช่น SEO, Marketing Automation มีแบบรายเดือน ซึ่งรวมถึงการดูแลอย่างต่อเนื่องและปรับปรุงระบบ'
|
||||
},
|
||||
{
|
||||
q: 'ชำระเงินได้อย่างไร?',
|
||||
a: 'รับชำระเงินผ่านการโอนเงินธนาคาร บริษัทออกใบเสร็จและใบกำกับภาษีให้ได้'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'เทคนิคและการรองรับ',
|
||||
questions: [
|
||||
{
|
||||
q: 'เว็บไซต์รองรับมือถือไหม?',
|
||||
a: 'รองรับ 100%! ทุกเว็บไซต์ที่เราทำเป็น Responsive Design แสดงผลสวยงามทั้งบนมือถือ แท็บเล็ต และคอมพิวเตอร์'
|
||||
},
|
||||
{
|
||||
q: 'มี Warranty ไหม?',
|
||||
a: 'มี! เราให้ Warranty สำหรับ bug และ error ที่เกิดจากระบบของเรา ตลอดอายุสัญญา'
|
||||
},
|
||||
{
|
||||
q: 'ถ้ามีปัญหาต้องทำอย่างไร?',
|
||||
a: 'ติดต่อเราได้หลายช่องทาง: โทรศัพท์, LINE, Email เราจะตอบกลับภายใน 24 ชั่วโมงทำการ'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default function FAQPage() {
|
||||
const [openItems, setOpenItems] = useState<Record<string, boolean>>({})
|
||||
|
||||
const toggleItem = (category: string, index: number) => {
|
||||
const key = `${category}-${index}`
|
||||
setOpenItems(prev => ({
|
||||
...prev,
|
||||
[key]: !prev[key]
|
||||
}))
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="flex-grow">
|
||||
{/* Hero Section */}
|
||||
<section className="py-20 bg-gradient-to-br from-purple-600 via-indigo-600 to-purple-800 relative overflow-hidden">
|
||||
{/* Floating Shapes */}
|
||||
<div className="absolute top-20 left-10 w-72 h-72 bg-white/20 rounded-full blur-3xl animate-float-1"></div>
|
||||
<div className="absolute bottom-20 right-10 w-96 h-96 bg-purple-300/20 rounded-full blur-3xl animate-float-2"></div>
|
||||
<div className="absolute top-1/3 left-1/4 w-48 h-48 bg-white/10 rounded-full blur-2xl animate-float-3"></div>
|
||||
|
||||
{/* Grid Pattern */}
|
||||
<div className="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: 'linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px)', backgroundSize: '50px 50px' }}></div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight">
|
||||
คำถามที่พบบ่อย
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-white/80 max-w-2xl mx-auto">
|
||||
รวบรวมคำถามที่ลูกค้าถามบ่อย พร้อมคำตอบที่ชัดเจน
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ Content */}
|
||||
<section className="py-20 bg-gradient-to-b from-gray-50 to-white">
|
||||
<div className="container mx-auto px-4">
|
||||
{faqs.map((category) => (
|
||||
<div key={category.category} className="max-w-4xl mx-auto mb-12">
|
||||
<h2 className="text-2xl font-bold mb-6 text-purple-700 flex items-center gap-3">
|
||||
<span className="w-2 h-8 bg-purple-600 rounded-full"></span>
|
||||
{category.category}
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{category.questions.map((faq, index) => {
|
||||
const key = `${category.category}-${index}`
|
||||
const isOpen = openItems[key]
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
className="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
<button
|
||||
onClick={() => toggleItem(category.category, index)}
|
||||
className="flex justify-between items-center cursor-pointer p-6 font-bold text-lg text-gray-900 hover:bg-purple-50 transition w-full text-left"
|
||||
>
|
||||
<span>{faq.q}</span>
|
||||
<svg
|
||||
className={`w-5 h-5 text-purple-700 transition transform ${isOpen ? 'rotate-45' : ''}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
</button>
|
||||
{isOpen && (
|
||||
<div className="px-6 pb-6 text-gray-700 leading-relaxed border-t border-gray-100 pt-4">
|
||||
{faq.a}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* CTA Section */}
|
||||
<div className="max-w-3xl mx-auto text-center mt-16 py-12 bg-primary rounded-2xl">
|
||||
<h2 className="text-2xl md:text-3xl font-bold mb-4 text-black">
|
||||
ยังมีคำถามอื่นอีก?
|
||||
</h2>
|
||||
<p className="text-lg text-gray-800 mb-8">
|
||||
ติดต่อเรามาได้เลย ยินดีให้คำปรึกษาฟรี!
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="tel:0809955945" className="bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-900 transition-colors inline-flex items-center justify-center">
|
||||
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
||||
</svg>
|
||||
080-995-5945
|
||||
</a>
|
||||
<a href="/contact-us" className="bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-colors inline-flex items-center justify-center">
|
||||
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
|
||||
</svg>
|
||||
ติดต่อเรา
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
130
src/app/(frontend)/globals.css
Normal file
130
src/app/(frontend)/globals.css
Normal file
@@ -0,0 +1,130 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-primary: #fed400;
|
||||
--color-primary-hover: #e6c200;
|
||||
--color-dark: #111827;
|
||||
--color-dark-secondary: #1f2937;
|
||||
--color-gray-50: #f9fafb;
|
||||
--color-gray-100: #f3f4f6;
|
||||
--color-gray-200: #e5e7eb;
|
||||
--color-gray-300: #d1d5db;
|
||||
--color-gray-400: #9ca3af;
|
||||
--color-gray-500: #6b7280;
|
||||
--color-gray-600: #4b5563;
|
||||
--color-gray-700: #374151;
|
||||
--color-gray-800: #1f2937;
|
||||
--color-gray-900: #111827;
|
||||
--color-white: #ffffff;
|
||||
--color-accent-blue: #0ea5e9;
|
||||
--color-accent-teal: #0d9488;
|
||||
--color-accent-purple: #7c3aed;
|
||||
--color-accent-green: #16a34a;
|
||||
|
||||
--font-kanit: 'Kanit', sans-serif;
|
||||
--font-noto: 'Noto Sans Thai', sans-serif;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-noto), system-ui, sans-serif;
|
||||
color: var(--color-dark);
|
||||
background-color: var(--color-white);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-kanit), system-ui, sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reveal animations */
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||
}
|
||||
|
||||
.reveal.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.reveal-left {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||
}
|
||||
|
||||
.reveal-left.visible {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.reveal-right {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||
}
|
||||
|
||||
.reveal-right.visible {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* Float animations */
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
@keyframes floatDot {
|
||||
0%, 100% { transform: translateY(0px) scale(1); }
|
||||
50% { transform: translateY(-10px) scale(1.2); }
|
||||
}
|
||||
|
||||
.animate-float-1 { animation: float 6s ease-in-out infinite; }
|
||||
.animate-float-2 { animation: float 8s ease-in-out infinite 2s; }
|
||||
.animate-float-3 { animation: float 7s ease-in-out infinite 4s; }
|
||||
.animate-float-dot-1 { animation: floatDot 4s ease-in-out infinite; }
|
||||
.animate-float-dot-2 { animation: floatDot 5s ease-in-out infinite 1s; }
|
||||
.animate-float-dot-3 { animation: floatDot 6s ease-in-out infinite 2s; }
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp 0.8s ease forwards;
|
||||
}
|
||||
|
||||
/* Line clamp utilities */
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.line-clamp-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
82
src/app/(frontend)/layout.tsx
Normal file
82
src/app/(frontend)/layout.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
import type { Metadata } from 'next'
|
||||
import './globals.css'
|
||||
import Navigation from '@/components/Navigation'
|
||||
import Footer from '@/components/Footer'
|
||||
import CookieBanner from '@/components/CookieBanner'
|
||||
import { getPayload } from 'payload'
|
||||
import config from '@payload-config'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
metadataBase: new URL(process.env.NEXT_PUBLIC_SERVER_URL || 'https://moreminimore.com'),
|
||||
title: {
|
||||
default: 'MoreminiMore - ที่ปรึกษาองค์กร AI เพิ่มยอดขายด้วยข้อมูล',
|
||||
template: '%s | MoreminiMore',
|
||||
},
|
||||
description: 'เราให้คำปรึกษาด้าน AI Transformation กลยุทธ์การตลาดโดยใช้ข้อมูลเป็นพื้นฐาน พัฒนาศักยภาพของบุคลากรให้สูงขึ้น เพื่อเพิ่มยอดขายให้กับลูกค้าให้มากที่สุด',
|
||||
keywords: ['AI', 'AI Transformation', 'Marketing Automation', 'Web Development', 'Chatbot', 'Thai SME'],
|
||||
authors: [{ name: 'MoreminiMore Co., Ltd.' }],
|
||||
creator: 'MoreminiMore Co., Ltd.',
|
||||
publisher: 'MoreminiMore Co., Ltd.',
|
||||
formatDetection: {
|
||||
email: false,
|
||||
address: false,
|
||||
telephone: false,
|
||||
},
|
||||
openGraph: {
|
||||
type: 'website',
|
||||
locale: 'th_TH',
|
||||
url: 'https://moreminimore.com',
|
||||
siteName: 'MoreminiMore',
|
||||
title: 'MoreminiMore - ที่ปรึกษาองค์กร AI เพิ่มยอดขายด้วยข้อมูล',
|
||||
description: 'เราให้คำปรึกษาด้าน AI Transformation กลยุทธ์การตลาดโดยใช้ข้อมูลเป็นพื้นฐาน',
|
||||
images: [{ url: '/branding/logo-long.png', width: 200, height: 50, alt: 'MoreminiMore' }],
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: 'MoreminiMore - ที่ปรึกษาองค์กร AI เพิ่มยอดขายด้วยข้อมูล',
|
||||
description: 'เราให้คำปรึกษาด้าน AI Transformation กลยุทธ์การตลาดโดยใช้ข้อมูลเป็นพื้นฐาน',
|
||||
images: ['/branding/logo-long.png'],
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
googleBot: {
|
||||
index: true,
|
||||
follow: true,
|
||||
'max-video-preview': -1,
|
||||
'max-image-preview': 'large',
|
||||
'max-snippet': -1,
|
||||
},
|
||||
},
|
||||
verification: {
|
||||
google: 'your-google-verification-code',
|
||||
},
|
||||
}
|
||||
|
||||
export default async function FrontendLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="th">
|
||||
<head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&family=Kanit:wght@400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/branding/favicon-32.png" />
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/branding/favicon-192.png" />
|
||||
<link rel="apple-touch-icon" href="/branding/apple-touch-icon.png" />
|
||||
</head>
|
||||
<body className="flex flex-col min-h-screen bg-white">
|
||||
<Navigation />
|
||||
<main className="flex-grow">{children}</main>
|
||||
<Footer />
|
||||
<CookieBanner />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
449
src/app/(frontend)/page.tsx
Normal file
449
src/app/(frontend)/page.tsx
Normal file
@@ -0,0 +1,449 @@
|
||||
import Link from 'next/link'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export const metadata = {
|
||||
title: 'รับทำเว็บไซต์ SEO AI Chatbot | MoreminiMore - โซลูชัน IT เพื่อ SMEs ไทย',
|
||||
description: 'รับทำเว็บไซต์ SEO AI Chatbot และ Marketing Automation สำหรับ SMEs ไทย เพิ่มยอดขาย ลดต้นทุน ด้วยเทคโนโลยีที่ทันสมัย',
|
||||
keywords: 'รับทำเว็บไซต์, SEO, AI Chatbot, Marketing Automation, SMEs, ไทย',
|
||||
openGraph: {
|
||||
title: 'รับทำเว็บไซต์ SEO AI Chatbot | MoreminiMore',
|
||||
description: 'รับทำเว็บไซต์ SEO AI Chatbot และ Marketing Automation สำหรับ SMEs ไทย เพิ่มยอดขาย ลดต้นทุน',
|
||||
url: 'https://moreminimore.com',
|
||||
siteName: 'MoreminiMore',
|
||||
locale: 'th_TH',
|
||||
type: 'website',
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: 'รับทำเว็บไซต์ SEO AI Chatbot | MoreminiMore',
|
||||
description: 'รับทำเว็บไซต์ SEO AI Chatbot และ Marketing Automation สำหรับ SMEs ไทย',
|
||||
},
|
||||
alternates: {
|
||||
canonical: 'https://moreminimore.com',
|
||||
},
|
||||
}
|
||||
|
||||
const jsonLd = {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'ProfessionalService',
|
||||
name: 'มอร์มินิมอร์ (MoreminiMore)',
|
||||
description: 'รับทำเว็บไซต์ SEO AI Chatbot และ Marketing Automation สำหรับ SMEs ไทย',
|
||||
url: 'https://moreminimore.com',
|
||||
telephone: '+66809955945',
|
||||
email: 'contact@moreminimore.com',
|
||||
address: {
|
||||
'@type': 'PostalAddress',
|
||||
addressCountry: 'TH',
|
||||
},
|
||||
areaServed: {
|
||||
'@type': 'Country',
|
||||
name: 'Thailand',
|
||||
},
|
||||
serviceType: ['รับทำเว็บไซต์', 'SEO', 'AI Chatbot', 'Marketing Automation', 'Tech Consulting'],
|
||||
priceRange: '$$',
|
||||
openingHours: 'Mo-Fr 09:00-18:00',
|
||||
sameAs: [
|
||||
'https://line.me/ti/p/~@539hdlul',
|
||||
],
|
||||
}
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
||||
/>
|
||||
{/* Hero Section */}
|
||||
<section id="hero" className="relative overflow-hidden min-h-[85vh] flex items-center">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary via-yellow-200 via-red-400 to-purple-500">
|
||||
<div className="absolute top-20 left-10 w-72 h-72 bg-red-500/30 rounded-full blur-3xl animate-float-1" />
|
||||
<div className="absolute bottom-20 right-10 w-96 h-96 bg-purple-500/30 rounded-full blur-3xl animate-float-2" />
|
||||
<div className="absolute top-1/3 left-1/4 w-48 h-48 bg-blue-500/20 rounded-full blur-2xl animate-float-3" />
|
||||
<div className="absolute bottom-1/3 right-1/4 w-64 h-64 bg-green-500/20 rounded-full blur-2xl animate-float-1" style={{ animationDelay: '1.5s' }} />
|
||||
<div className="absolute top-1/2 left-1/2 w-40 h-40 bg-pink-500/25 rounded-full blur-2xl animate-float-2" style={{ animationDelay: '0.5s' }} />
|
||||
</div>
|
||||
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div className="absolute top-1/4 left-[10%] w-3 h-3 bg-black/10 rounded-full animate-float-dot-1" />
|
||||
<div className="absolute top-1/3 left-[80%] w-2 h-2 bg-black/10 rounded-full animate-float-dot-2" />
|
||||
<div className="absolute top-2/3 left-[20%] w-4 h-4 bg-black/10 rounded-full animate-float-dot-3" />
|
||||
<div className="absolute top-1/2 left-[70%] w-2 h-2 bg-black/10 rounded-full animate-float-dot-1" />
|
||||
<div className="absolute top-3/4 left-[60%] w-3 h-3 bg-black/10 rounded-full animate-float-dot-2" />
|
||||
<div className="absolute top-1/5 left-[45%] w-2 h-2 bg-black/10 rounded-full animate-float-dot-3" />
|
||||
</div>
|
||||
|
||||
<div className="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: 'linear-gradient(black 1px, transparent 1px), linear-gradient(90deg, black 1px, transparent 1px)', backgroundSize: '50px 50px' }} />
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10 py-20">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<div className="reveal inline-flex items-center gap-2 bg-black/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8">
|
||||
<span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
|
||||
<span className="text-sm font-medium text-black/80">พร้อมช่วยธุรกิจคุณเติบโต</span>
|
||||
</div>
|
||||
|
||||
<h1 className="reveal text-4xl md:text-6xl lg:text-7xl font-bold mb-6 text-black leading-tight animate-fade-in-up">
|
||||
เปลี่ยนธุรกิจให้<br />
|
||||
<span className="text-black">เติบโตด้วย AI</span>
|
||||
</h1>
|
||||
|
||||
<p className="reveal text-lg md:text-xl text-black/70 mb-10 max-w-2xl mx-auto leading-relaxed animate-fade-in-up">
|
||||
รับทำเว็บไซต์ AI Chatbot และระบบอัตโนมัติทางการตลาด
|
||||
ที่ช่วยเพิ่มยอดขาย ลดต้นทุน ให้ธุรกิจ SMEs ไทย
|
||||
</p>
|
||||
|
||||
<div className="reveal flex flex-col sm:flex-row gap-4 justify-center items-center animate-fade-in-up">
|
||||
<a href="tel:0809955945" className="group bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-black/80 transition-all duration-300 hover:scale-105 shadow-2xl flex items-center gap-3">
|
||||
<svg className="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z" />
|
||||
</svg>
|
||||
โทรหาเรา
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" className="group bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 shadow-2xl flex items-center gap-3">
|
||||
<img src="/icons/social/line.svg" alt="LINE" className="w-5 h-5 group-hover:animate-bounce" />
|
||||
เพิ่ม Line
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="reveal mt-12 pt-8 border-t border-black/10 animate-fade-in-up">
|
||||
<p className="text-sm text-black/50 mb-4">เชื่อถือได้</p>
|
||||
<div className="flex flex-wrap justify-center gap-6 text-black/60 text-sm">
|
||||
<span className="flex items-center gap-2">
|
||||
<svg className="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" /></svg>
|
||||
ปรึกษาฟรี
|
||||
</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<svg className="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" /></svg>
|
||||
ดูแลหลังขาย
|
||||
</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<svg className="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" /></svg>
|
||||
ราคาเหมาะสม
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
|
||||
<svg className="w-6 h-6 text-black/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Services Section */}
|
||||
<section id="services" className="py-24 bg-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="reveal text-center mb-16 max-w-2xl mx-auto">
|
||||
<span className="inline-block px-4 py-1 bg-primary/20 text-black rounded-full text-sm font-medium mb-4">
|
||||
บริการของเรา
|
||||
</span>
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-black">
|
||||
โซลูชันครบวงจร<br />สำหรับธุรกิจของคุณ
|
||||
</h2>
|
||||
<p className="text-gray-600">
|
||||
เราช่วยคุณตั้งแต่เริ่มต้นจนถึงการเติบโต ด้วยเทคโนโลยีที่เหมาะกับงบประมาณ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||||
<Link href="/services/web-development" className="reveal group bg-gray-50 rounded-3xl p-8 hover:bg-primary transition-all duration-300 hover:shadow-2xl hover:-translate-y-2">
|
||||
<div className="w-16 h-16 bg-primary/20 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-white/50 transition-colors">
|
||||
<svg className="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-black group-hover:text-black">AI-Enhanced Website</h3>
|
||||
<p className="text-gray-600 text-sm mb-4 group-hover:text-gray-700">
|
||||
เว็บไซต์ที่มี AI Chatbot ตอบคำถามลูกค้า 24/7 พร้อมระบบ SEO ที่ติดอันดับ Google
|
||||
</p>
|
||||
<span className="text-sm font-medium text-black/60 group-hover:text-black/80 flex items-center gap-1">
|
||||
ดูรายละเอียด
|
||||
<svg className="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
<Link href="/services/marketing-automation" className="reveal group bg-gray-50 rounded-3xl p-8 hover:bg-primary transition-all duration-300 hover:shadow-2xl hover:-translate-y-2">
|
||||
<div className="w-16 h-16 bg-primary/20 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-white/50 transition-colors">
|
||||
<svg className="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-black group-hover:text-black">Marketing Automation</h3>
|
||||
<p className="text-gray-600 text-sm mb-4 group-hover:text-gray-700">
|
||||
ระบบการตลาดอัตโนมัติ รวม SEO, LINE, Facebook, Email ลดงานซ้ำซ้อน
|
||||
</p>
|
||||
<span className="text-sm font-medium text-black/60 group-hover:text-black/80 flex items-center gap-1">
|
||||
ดูรายละเอียด
|
||||
<svg className="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
<Link href="/services/ai-automation" className="reveal group bg-gray-50 rounded-3xl p-8 hover:bg-primary transition-all duration-300 hover:shadow-2xl hover:-translate-y-2">
|
||||
<div className="w-16 h-16 bg-primary/20 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-white/50 transition-colors">
|
||||
<svg className="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-black group-hover:text-black">AI Automation</h3>
|
||||
<p className="text-gray-600 text-sm mb-4 group-hover:text-gray-700">
|
||||
ระบบอัตโนมัติทุกอย่าง ตอบคำถาม ส่งข้อมูล บันทึกออร์เดอร์ 24/7
|
||||
</p>
|
||||
<span className="text-sm font-medium text-black/60 group-hover:text-black/80 flex items-center gap-1">
|
||||
ดูรายละเอียด
|
||||
<svg className="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
<Link href="/services/tech-consult" className="reveal group bg-gray-50 rounded-3xl p-8 hover:bg-primary transition-all duration-300 hover:shadow-2xl hover:-translate-y-2">
|
||||
<div className="w-16 h-16 bg-primary/20 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-white/50 transition-colors">
|
||||
<svg className="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-black group-hover:text-black">Tech Consult</h3>
|
||||
<p className="text-gray-600 text-sm mb-4 group-hover:text-gray-700">
|
||||
คำปรึกษาระบบ IT และ Cloud เลือกเครื่องมือที่เหมาะกับธุรกิจคุณ
|
||||
</p>
|
||||
<span className="text-sm font-medium text-black/60 group-hover:text-black/80 flex items-center gap-1">
|
||||
ดูรายละเอียด
|
||||
<svg className="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
<div className="reveal bg-black rounded-3xl p-8 text-white flex flex-col justify-between">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold mb-3 text-primary">ไม่แน่ใจเลือกอะไร?</h3>
|
||||
<p className="text-gray-400 text-sm mb-6">
|
||||
ปรึกษาฟรี! เราพร้อมแนะนำโซลูชันที่เหมาะกับธุรกิจและงบประมาณของคุณ
|
||||
</p>
|
||||
</div>
|
||||
<a href="tel:0809955945" className="bg-primary text-black px-6 py-3 rounded-full font-bold text-sm text-center hover:bg-primary/90 transition-colors">
|
||||
ปรึกษาฟรี
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Why Choose Us */}
|
||||
<section id="why-choose-us" className="py-24 bg-gray-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="reveal text-3xl md:text-4xl font-bold text-center mb-12 text-black">
|
||||
ทำไมเลือกเรา?
|
||||
</h2>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div className="reveal bg-white p-8 rounded-3xl shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100">
|
||||
<div className="w-14 h-14 bg-primary/20 rounded-2xl flex items-center justify-center mb-5">
|
||||
<svg className="w-7 h-7 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-bold text-xl mb-3 text-black">เน้นผลลัพธ์</h3>
|
||||
<p className="text-gray-600 leading-relaxed">เราวัดผลทุกอย่าง และมุ่งเน้นให้เห็นผลจริงในการเพิ่มยอดขาย</p>
|
||||
</div>
|
||||
|
||||
<div className="reveal bg-white p-8 rounded-3xl shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100">
|
||||
<div className="w-14 h-14 bg-primary/20 rounded-2xl flex items-center justify-center mb-5">
|
||||
<svg className="w-7 h-7 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-bold text-xl mb-3 text-black">ราคาเหมาะสม</h3>
|
||||
<p className="text-gray-600 leading-relaxed">ออกแบบมาให้ SMEs สามารถเริ่มต้นได้ง่าย ไม่ต้องลงทุนมาก</p>
|
||||
</div>
|
||||
|
||||
<div className="reveal bg-white p-8 rounded-3xl shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100">
|
||||
<div className="w-14 h-14 bg-primary/20 rounded-2xl flex items-center justify-center mb-5">
|
||||
<svg className="w-7 h-7 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-bold text-xl mb-3 text-black">ดูแลต่อเนื่อง</h3>
|
||||
<p className="text-gray-600 leading-relaxed">ไม่ทิ้งหลังขาย พร้อมอบรมและสนับสนุนตลอดการใช้งาน</p>
|
||||
</div>
|
||||
|
||||
<div className="reveal bg-white p-8 rounded-3xl shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100">
|
||||
<div className="w-14 h-14 bg-primary/20 rounded-2xl flex items-center justify-center mb-5">
|
||||
<svg className="w-7 h-7 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-bold text-xl mb-3 text-black">ทำงานเร็ว</h3>
|
||||
<p className="text-gray-600 leading-relaxed">เข้าใจว่าธุรกิจต้องการผลลัพธ์เร็ว ทำงานตรงเวลา ไม่ผัดวัน</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Process Section */}
|
||||
<section id="process" className="py-24 bg-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center mb-16">
|
||||
<span className="reveal inline-block px-4 py-1 bg-primary/20 text-black rounded-full text-sm font-medium mb-4">
|
||||
กระบวนการทำงาน
|
||||
</span>
|
||||
<h2 className="reveal text-3xl md:text-4xl font-bold mb-4 text-black">
|
||||
เริ่มต้นง่ายๆ 4 ขั้นตอน
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="reveal flex gap-6 mb-8 group">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-16 h-16 bg-primary rounded-2xl flex items-center justify-center text-2xl font-bold text-black shadow-lg group-hover:scale-110 transition-transform">
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-grow bg-gray-50 rounded-2xl p-6 hover:shadow-lg transition-shadow">
|
||||
<h3 className="font-bold text-lg mb-2 text-black">ปรึกษาฟรี</h3>
|
||||
<p className="text-gray-600 text-sm">พูดคุยกับเราฟรี! เราจะฟังความต้องการของคุณและแนะนำโซลูชันที่เหมาะสม</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="reveal flex gap-6 mb-8 group">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-16 h-16 bg-black text-primary rounded-2xl flex items-center justify-center text-2xl font-bold shadow-lg group-hover:scale-110 transition-transform">
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-grow bg-gray-50 rounded-2xl p-6 hover:shadow-lg transition-shadow">
|
||||
<h3 className="font-bold text-lg mb-2 text-black">วางแผนและเสนอราคา</h3>
|
||||
<p className="text-gray-600 text-sm">เราจะส่ง proposal พร้อมราคาและ timeline ที่ชัดเจน ไม่มีค่าใช้จ่ายซ่อนเร้น</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="reveal flex gap-6 mb-8 group">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-16 h-16 bg-primary rounded-2xl flex items-center justify-center text-2xl font-bold text-black shadow-lg group-hover:scale-110 transition-transform">
|
||||
3
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-grow bg-gray-50 rounded-2xl p-6 hover:shadow-lg transition-shadow">
|
||||
<h3 className="font-bold text-lg mb-2 text-black">พัฒนาและติดตั้ง</h3>
|
||||
<p className="text-gray-600 text-sm">ทีมงานเริ่มพัฒนาระบบให้คุณ พร้อมอัปเดตความคืบหน้าตลอด</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="reveal flex gap-6 group">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-16 h-16 bg-black text-primary rounded-2xl flex items-center justify-center text-2xl font-bold shadow-lg group-hover:scale-110 transition-transform">
|
||||
4
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-grow bg-gray-50 rounded-2xl p-6 hover:shadow-lg transition-shadow">
|
||||
<h3 className="font-bold text-lg mb-2 text-black">ส่งมอบและดูแลต่อเนื่อง</h3>
|
||||
<p className="text-gray-600 text-sm">ส่งมอบพร้อมอบรมการใช้งาน และดูแลหลังการขายให้ตลอด</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Quick CTA */}
|
||||
<section id="quick-cta" className="py-24 bg-primary">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h2 className="reveal text-3xl md:text-4xl font-bold mb-4 text-black">
|
||||
พร้อมเปลี่ยนธุรกิจแล้วหรือยัง?
|
||||
</h2>
|
||||
<p className="reveal text-black/70 mb-10 max-w-xl mx-auto text-lg">
|
||||
เริ่มต้นง่ายๆ แค่โทรหาหรือเพิ่ม LINE มาคุยกันก่อน ไม่มีค่าใช้จ่าย!
|
||||
</p>
|
||||
<div className="reveal flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="tel:0809955945" className="bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-black/80 transition-all hover:scale-105 shadow-xl flex items-center justify-center gap-2">
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z" />
|
||||
</svg>
|
||||
080-995-5945
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" className="bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all hover:scale-105 shadow-xl flex items-center justify-center gap-2">
|
||||
<img src="/icons/social/line.svg" alt="LINE" className="w-5 h-5" />
|
||||
เพิ่ม Line
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SEO Content */}
|
||||
<section id="seo-content" className="py-24 bg-gray-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="reveal text-3xl md:text-4xl font-bold mb-8 text-center text-black">
|
||||
บริการรับทำเว็บไซต์ SEO และ AI Chatbot เพื่อธุรกิจ SMEs
|
||||
</h2>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div className="reveal">
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
<strong className="text-black">บริษัท มอร์มินิมอร์ จำกัด</strong> ให้บริการรับทำเว็บไซต์ SEO และ AI Chatbot ครบวงจร สำหรับธุรกิจ SMEs ทั่วประเทศ เราเข้าใจดีว่าในยุคดิจิทัลปัจจุบัน การมีเว็บไซต์ที่สวยงามอย่างเดียวไม่เพียงพอ แต่ต้องเป็นเว็บไซต์ที่สามารถเพิ่มยอดขายได้จริง ติดอันดับ Google และมีระบบอัตโนมัติที่ช่วยลดต้นทุนในการดำเนินงาน
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="reveal">
|
||||
<h3 className="text-xl font-bold mt-8 mb-4 text-black">ทำไมต้องเลือกบริการของเรา?</h3>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
ด้วยประสบการณ์ในการพัฒนาระบบ IT และ AI ให้กับธุรกิจหลากหลายประเภท เราพร้อมมอบโซลูชันที่เหมาะสมกับงบประมาณและความต้องการของคุณ ไม่ว่าจะเป็นเว็บไซต์สำหรับร้านค้าออนไลน์ ระบบ Chatbot ตอบคำถามอัตโนมัติ หรือการทำ SEO ให้เว็บติดอันดับ Google เราดูแลครบทุกขั้นตอนตั้งแต่ต้นจนจบ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="reveal">
|
||||
<h3 className="text-xl font-bold mt-8 mb-4 text-black">บริการรับทำเว็บไซต์ครบวงจร</h3>
|
||||
<ul className="space-y-3 text-gray-700">
|
||||
{[
|
||||
'ออกแบบ UI/UX ที่ใช้งานง่าย สวยงาม ทันสมัย',
|
||||
'รองรับ SEO ตั้งแต่โครงสร้างเว็บไซต์',
|
||||
'Responsive Design แสดงผลสวยงามทุกอุปกรณ์',
|
||||
'ระบบจัดการเนื้อหา (CMS) ใช้งานง่าย',
|
||||
'ติดตั้ง SSL Certificate เพื่อความปลอดภัย',
|
||||
'เชื่อมต่อ Google Analytics และ Search Console',
|
||||
'อบรมการใช้งานฟรี',
|
||||
].map((item, i) => (
|
||||
<li key={i} className="flex items-start gap-3">
|
||||
<svg className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" /></svg>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="reveal">
|
||||
<h3 className="text-xl font-bold mt-8 mb-4 text-black">AI Chatbot ตอบคำถามลูกค้า 24/7</h3>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
Chatbot คือระบบตอบคำถามอัตโนมัติที่ทำงานตลอด 24 ชั่วโมง ไม่มีวันหยุด ช่วยคุณตอบคำถามลูกค้าได้ทันที แม้ในเวลาที่ร้านปิด ลดภาระงานของพนักงาน และเพิ่มโอกาสในการปิดการขาย เพราะลูกค้าได้รับคำตอบทันทีที่ต้องการ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="reveal">
|
||||
<h3 className="text-xl font-bold mt-8 mb-4 text-black">Marketing Automation ลดงานซ้ำซ้อน</h3>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
ระบบอัตโนมัติทางการตลาดช่วยให้คุณสื่อสารกับลูกค้าได้อย่างมีประสิทธิภาพโดยไม่ต้องทำด้วยตนเองทุกครั้ง เช่น การส่งอีเมลติดตามลูกค้าที่ทิ้งตะกร้าสินค้า การส่งโปรโมชั่นวันเกิด หรือการแจ้งเตือนเมื่อมีลูกค้าใหม่
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="reveal bg-primary/10 rounded-2xl p-6 mt-8">
|
||||
<h3 className="text-xl font-bold mb-4 text-black">เริ่มต้นอย่างไร?</h3>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
หากคุณสนใจบริการของเรา สามารถติดต่อมาปรึกษาฟรี ไม่มีค่าใช้จ่าย เราพร้อมช่วยคุณวิเคราะห์ความต้องการและแนะนำโซลูชันที่เหมาะสมที่สุดกับธุรกิจและงบประมาณของคุณ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
31
src/app/(frontend)/portfolio/layout.tsx
Normal file
31
src/app/(frontend)/portfolio/layout.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'ผลงาน | MoreminiMore - ตัวอย่างเว็บไซต์และระบบที่พัฒนา',
|
||||
description: 'ตัวอย่างเว็บไซต์และระบบที่พัฒนาให้ธุรกิจ SMEs กว่า 50+ ราย',
|
||||
keywords: 'ผลงาน, portfolio, เว็บไซต์, E-commerce, Web Development, SMEs',
|
||||
openGraph: {
|
||||
title: 'ผลงาน | MoreminiMore - ตัวอย่างเว็บไซต์และระบบที่พัฒนา',
|
||||
description: 'ตัวอย่างเว็บไซต์และระบบที่พัฒนาให้ธุรกิจ SMEs กว่า 50+ ราย',
|
||||
url: 'https://moreminimore.com/portfolio',
|
||||
siteName: 'MoreminiMore',
|
||||
locale: 'th_TH',
|
||||
type: 'website',
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: 'ผลงาน | MoreminiMore - ตัวอย่างเว็บไซต์และระบบที่พัฒนา',
|
||||
description: 'ตัวอย่างเว็บไซต์และระบบที่พัฒนาให้ธุรกิจ SMEs กว่า 50+ ราย',
|
||||
},
|
||||
alternates: {
|
||||
canonical: 'https://moreminimore.com/portfolio',
|
||||
},
|
||||
}
|
||||
|
||||
export default function PortfolioLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return children
|
||||
}
|
||||
321
src/app/(frontend)/portfolio/page.tsx
Normal file
321
src/app/(frontend)/portfolio/page.tsx
Normal file
@@ -0,0 +1,321 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
interface PortfolioItem {
|
||||
name: string
|
||||
url: string
|
||||
category: string
|
||||
thumbnail: string
|
||||
description: string
|
||||
services: string[]
|
||||
}
|
||||
|
||||
const portfolioItems: PortfolioItem[] = [
|
||||
{
|
||||
name: "Lungfinler",
|
||||
url: "https://lungfinler.com",
|
||||
category: "webdev",
|
||||
thumbnail: "/images/portfolio/lungfinler.png",
|
||||
description: "Digital Agency - บริการด้านการสร้างแบรนด์ กราฟิกดีไซน์ และถ่ายภาพสินค้าคุณภาพสูง",
|
||||
services: ["Website", "Branding", "Graphic Design", "Product Photography"]
|
||||
},
|
||||
{
|
||||
name: "Jet Industries",
|
||||
url: "https://jetindustries.co.th",
|
||||
category: "webdev",
|
||||
thumbnail: "/images/portfolio/jetindustries.png",
|
||||
description: "ผู้ผลิตพลาสติกฉีดขึ้นรูปอย่างแม่นยำ (Precision Plastic Injection Molding) มีประสบการณ์กว่า 40 ปี",
|
||||
services: ["Website", "Industrial Manufacturing"]
|
||||
},
|
||||
{
|
||||
name: "สำนักงานกฎหมาย ตถาตา",
|
||||
url: "https://lawyernoom.com",
|
||||
category: "webdev",
|
||||
thumbnail: "/images/portfolio/lawyernoom.png",
|
||||
description: "สำนักงานกฎหมายโดย ทนายความ คมสัน ศรีวนิชย์ - ให้บริการด้านคดีความ คดีแพ่ง คดีอาญา คดียาเสพติด กฎหมายภาษีอากร และการประกันตัว",
|
||||
services: ["Website", "Legal Services", "Criminal Law", "Tax Law"]
|
||||
},
|
||||
{
|
||||
name: "Underdog Marketing",
|
||||
url: "https://underdog.run",
|
||||
category: "webdev",
|
||||
thumbnail: "/images/portfolio/underdog.png",
|
||||
description: "บล็อกการตลาดและการขายสไตล์ \"ลุยไม่ยั้ง\" โดย บุ้ง ดีดติ่งหู - ที่ปรึกษาการตลาดและการขาย มีบทความ VDO Clip และหลักสูตรอบรม",
|
||||
services: ["Website", "Content Marketing", "Training Courses"]
|
||||
},
|
||||
{
|
||||
name: "Baofuling Shop",
|
||||
url: "https://baofulingshop.com",
|
||||
category: "ecommerce",
|
||||
thumbnail: "/images/portfolio/baofuling.png",
|
||||
description: "ร้านค้าออนไลน์ครีมบัวหิมะและผลิตภัณฑ์ความงามจีน - ครีมบัวหิมะ กอเอี๊ะ น้ำมันชะมด ครีมไข่มุก และผลิตภัณฑ์ดูแลผิวพรรณ",
|
||||
services: ["E-commerce", "Beauty Products", "Skincare"]
|
||||
},
|
||||
{
|
||||
name: "เทรนเนอร์ซันนี่",
|
||||
url: "https://trainersunny.com",
|
||||
category: "webdev",
|
||||
thumbnail: "/images/portfolio/trainersunny.png",
|
||||
description: "ผู้เชี่ยวชาญด้านการพัฒนาบุคลากรและ Soft Skill - หลักสูตรฝึกอบรม การสื่อสาร ภาวะผู้นำ การทำงานเป็นทีม และการพัฒนาตนเอง",
|
||||
services: ["Website", "Corporate Training", "Soft Skill Development"]
|
||||
},
|
||||
{
|
||||
name: "เลือดจระเข้วานิไทย",
|
||||
url: "https://เลือดจระเข้วานิไทย.com",
|
||||
category: "ecommerce",
|
||||
thumbnail: "/images/portfolio/luadjob.png",
|
||||
description: "ตัวแทนจำหน่ายเลือดจระเข้วานิไทยอย่างเป็นทางการ - ผลิตภัณฑ์เสริมอาหารเลือดจระเข้แคปซูล จากงานวิจัย ม.เกษตรศาสตร์ บำรุงเลือด ลดน้ำตาลในเลือด",
|
||||
services: ["E-commerce", "Health Supplements", "Crocodile Blood"]
|
||||
},
|
||||
{
|
||||
name: "ทวนทอง 99",
|
||||
url: "https://tuanthong99.com",
|
||||
category: "ecommerce",
|
||||
thumbnail: "/images/portfolio/tuanthong.png",
|
||||
description: "ร้านค้าออนไลน์สมุนไพรไทยคุณภาพสูง - ยาสตรี ยาขับลม ยาริดสีดวงทวาร ขมิ้นชัน กระชายขาว และผลิตภัณฑ์สุขภาพอื่นๆ",
|
||||
services: ["E-commerce", "Thai Herbal Medicine", "Health Products"]
|
||||
},
|
||||
{
|
||||
name: "Odoo Portal",
|
||||
url: "https://odooportal.com",
|
||||
category: "marketing",
|
||||
thumbnail: "/images/portfolio/odooportal.png",
|
||||
description: "ตัวแทนจำหน่าย Odoo อย่างเป็นทางการในประเทศไทย - บริการติดตั้งและดูแลระบบ Odoo ERP สำหรับธุรกิจ",
|
||||
services: ["Odoo ERP", "System Implementation", "Technical Support"]
|
||||
}
|
||||
]
|
||||
|
||||
const categories = [
|
||||
{ id: 'all', name: 'ทั้งหมด', count: portfolioItems.length },
|
||||
{ id: 'webdev', name: 'พัฒนาเว็บไซต์', count: portfolioItems.filter(p => p.category === 'webdev').length },
|
||||
{ id: 'ecommerce', name: 'อีคอมเมิร์ซ', count: portfolioItems.filter(p => p.category === 'ecommerce').length },
|
||||
{ id: 'marketing', name: 'ที่ปรึกษาการตลาด', count: portfolioItems.filter(p => p.category === 'marketing').length }
|
||||
]
|
||||
|
||||
export default function PortfolioPage() {
|
||||
const [activeCategory, setActiveCategory] = useState('all')
|
||||
const [isAnimating, setIsAnimating] = useState(false)
|
||||
|
||||
const filteredItems = activeCategory === 'all'
|
||||
? portfolioItems
|
||||
: portfolioItems.filter(item => item.category === activeCategory)
|
||||
|
||||
const handleFilterChange = (categoryId: string) => {
|
||||
setIsAnimating(true)
|
||||
setActiveCategory(categoryId)
|
||||
setTimeout(() => setIsAnimating(false), 300)
|
||||
}
|
||||
|
||||
const getCategoryLabel = (category: string) => {
|
||||
switch (category) {
|
||||
case 'webdev': return 'พัฒนาเว็บ'
|
||||
case 'ecommerce': return 'อีคอมเมิร์ซ'
|
||||
case 'marketing': return 'ที่ปรึกษาการตลาด'
|
||||
default: return category
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section - Teal Theme */}
|
||||
<section id="hero" className="relative overflow-hidden min-h-[50vh] flex items-center reveal">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-accent-teal-600 via-accent-teal-500 to-accent-teal-700">
|
||||
<div className="absolute top-20 left-10 w-72 h-72 bg-white/20 rounded-full blur-3xl animate-float-1"></div>
|
||||
<div className="absolute bottom-20 right-10 w-96 h-96 bg-teal-300/20 rounded-full blur-3xl animate-float-2"></div>
|
||||
<div className="absolute top-1/3 left-1/4 w-48 h-48 bg-white/10 rounded-full blur-2xl animate-float-3"></div>
|
||||
<div className="absolute bottom-1/3 right-1/4 w-64 h-64 bg-teal-200/20 rounded-full blur-2xl animate-float-1" style={{ animationDelay: '1.5s' }}></div>
|
||||
</div>
|
||||
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div className="absolute top-1/4 left-[10%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-1"></div>
|
||||
<div className="absolute top-1/3 left-[80%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2"></div>
|
||||
<div className="absolute top-2/3 left-[20%] w-4 h-4 bg-white/20 rounded-full animate-float-dot-3"></div>
|
||||
<div className="absolute bottom-1/4 left-[70%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-1" style={{ animationDelay: '2s' }}></div>
|
||||
</div>
|
||||
|
||||
<div className="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: 'linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px)', backgroundSize: '50px 50px' }}></div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10 py-20">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight animate-fade-in-up">
|
||||
ผลงานของเรา
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-white/80 max-w-2xl mx-auto animate-fade-in-up" style={{ animationDelay: '0.2s' }}>
|
||||
ผลงานพัฒนาเว็บไซต์และลูกค้าที่ไว้วางใจเรา
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Portfolio Grid Section */}
|
||||
<section id="portfolio" className="py-20 bg-gradient-to-b from-gray-50 to-white reveal">
|
||||
<div className="container mx-auto px-4">
|
||||
|
||||
{/* Category Filter */}
|
||||
<div className="flex flex-wrap justify-center gap-3 mb-12 reveal-left">
|
||||
{categories.map((cat) => (
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => handleFilterChange(cat.id)}
|
||||
className={`filter-btn px-6 py-3 rounded-full font-medium transition-all duration-300 ${
|
||||
activeCategory === cat.id
|
||||
? 'active bg-accent-teal-600 text-white border-2 border-accent-teal-600'
|
||||
: 'bg-white text-gray-700 border-2 border-gray-300 hover:border-accent-teal-500 hover:text-accent-teal-600'
|
||||
}`}
|
||||
>
|
||||
{cat.name} ({cat.count})
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Portfolio Grid */}
|
||||
<div className={`grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto transition-opacity duration-300 ${isAnimating ? 'opacity-0' : 'opacity-100'}`}>
|
||||
{filteredItems.map((item, index) => (
|
||||
<article
|
||||
key={item.url}
|
||||
className="portfolio-card group bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-500"
|
||||
style={{ animationDelay: `${index * 0.1}s` }}
|
||||
>
|
||||
{/* Thumbnail */}
|
||||
<div className="relative h-48 bg-gradient-to-br from-gray-100 to-gray-200 overflow-hidden">
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-teal-50 to-teal-100">
|
||||
<span className="text-4xl font-bold text-teal-200">{item.name.charAt(0)}</span>
|
||||
</div>
|
||||
{/* Overlay on hover */}
|
||||
<div className="absolute inset-0 bg-accent-teal-600/90 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
|
||||
<a
|
||||
href={item.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="bg-white text-accent-teal-700 px-6 py-3 rounded-full font-bold transform scale-90 group-hover:scale-100 transition-transform duration-300"
|
||||
>
|
||||
เยี่ยมชมเว็บไซต์
|
||||
</a>
|
||||
</div>
|
||||
{/* Category Badge */}
|
||||
<span className="absolute top-4 left-4 bg-white/90 backdrop-blur-sm text-gray-800 px-3 py-1 rounded-full text-sm font-semibold">
|
||||
{getCategoryLabel(item.category)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
<h3 className="text-xl font-bold text-gray-800 mb-2 group-hover:text-accent-teal-600 transition-colors">
|
||||
{item.name}
|
||||
</h3>
|
||||
<p className="text-gray-700 text-sm mb-4 line-clamp-2">
|
||||
{item.description}
|
||||
</p>
|
||||
|
||||
{/* Services Tags */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{item.services.map((service) => (
|
||||
<span key={service} className="bg-teal-50 text-teal-700 px-2 py-1 rounded-md text-xs font-medium">
|
||||
{service}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Visit Link */}
|
||||
<a
|
||||
href={item.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-4 inline-flex items-center text-accent-teal-600 font-medium hover:text-accent-teal-800 transition-colors"
|
||||
>
|
||||
เยี่ยมชมเว็บไซต์
|
||||
<svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Empty State */}
|
||||
{filteredItems.length === 0 && (
|
||||
<div className="hidden text-center py-16">
|
||||
<svg className="w-16 h-16 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
<h3 className="text-xl font-bold text-gray-800 mb-2">ไม่พบผลงานในหมวดหมู่นี้</h3>
|
||||
<p className="text-gray-600">ลองเลือกหมวดหมู่อื่นๆ ดูนะครับ</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section - Always Yellow */}
|
||||
<section id="cta" className="py-20 bg-primary reveal">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-6 text-black">
|
||||
อยากได้เว็บไซต์แบบนี้บ้าง?
|
||||
</h2>
|
||||
<p className="text-lg text-gray-800 mb-8">
|
||||
ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบเว็บไซต์ที่เหมาะกับธุรกิจของคุณ
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link href="/contact-us" className="bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-900 transition-colors inline-flex items-center justify-center">
|
||||
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
|
||||
</svg>
|
||||
ปรึกษาฟรี
|
||||
</Link>
|
||||
<Link href="tel:0809955945" className="bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-colors inline-flex items-center justify-center">
|
||||
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
||||
</svg>
|
||||
080-995-5945
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style jsx>{`
|
||||
.filter-btn {
|
||||
background: white;
|
||||
color: #1f2937;
|
||||
border: 2px solid #d1d5db;
|
||||
}
|
||||
|
||||
.filter-btn:hover {
|
||||
border-color: #0d9488;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.filter-btn.active {
|
||||
background: #0d9488;
|
||||
color: white;
|
||||
border-color: #0d9488;
|
||||
}
|
||||
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp 0.8s ease forwards;
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
)
|
||||
}
|
||||
249
src/app/(frontend)/privacy-policy/page.tsx
Normal file
249
src/app/(frontend)/privacy-policy/page.tsx
Normal file
@@ -0,0 +1,249 @@
|
||||
import type { Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'นโยบายความเป็นส่วนตัว (PDPA) | MoreminiMore',
|
||||
description: 'นโยบายความเป็นส่วนตัวตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล (PDPA) ของบริษัท มอร์มินิมอร์ จำกัด',
|
||||
keywords: 'นโยบายความเป็นส่วนตัว, PDPA, คุ้มครองข้อมูลส่วนบุคคล, MoreminiMore',
|
||||
openGraph: {
|
||||
title: 'นโยบายความเป็นส่วนตัว (PDPA) | MoreminiMore',
|
||||
description: 'นโยบายความเป็นส่วนตัวตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล (PDPA) ของบริษัท มอร์มินิมอร์ จำกัด',
|
||||
url: 'https://moreminimore.com/privacy-policy',
|
||||
siteName: 'MoreminiMore',
|
||||
locale: 'th_TH',
|
||||
type: 'website',
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: 'นโยบายความเป็นส่วนตัว (PDPA) | MoreminiMore',
|
||||
description: 'นโยบายความเป็นส่วนตัวตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล (PDPA) ของบริษัท มอร์มินิมอร์ จำกัด',
|
||||
},
|
||||
alternates: {
|
||||
canonical: 'https://moreminimore.com/privacy-policy',
|
||||
},
|
||||
}
|
||||
|
||||
export default function PrivacyPolicyPage() {
|
||||
return (
|
||||
<main className="flex-grow">
|
||||
{/* Hero Section */}
|
||||
<section className="py-20 bg-gradient-to-br from-yellow-50 to-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-center mb-12 text-gray-900">
|
||||
นโยบายความเป็นส่วนตัว
|
||||
</h1>
|
||||
|
||||
<div className="max-w-4xl mx-auto bg-white rounded-lg shadow-md p-8">
|
||||
{/* Document Info */}
|
||||
<div className="bg-yellow-50 rounded-lg p-6 mb-8 border border-yellow-200">
|
||||
<p className="text-gray-700 text-base">
|
||||
<strong>ชื่อเว็บไซต์:</strong> MoreminiMore<br />
|
||||
<strong>ผู้ควบคุมข้อมูล:</strong> บริษัท มอร์มินิมอร์ จำกัด<br />
|
||||
<strong>ที่อยู่:</strong> 53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120<br />
|
||||
<strong>มีผลบังคับใช้วันที่:</strong> 1 มีนาคม 2569<br />
|
||||
<strong>แก้ไขล่าสุด:</strong> 1 เมษายน 2569
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Table of Contents */}
|
||||
<div className="bg-yellow-50 rounded-lg p-6 mb-8 border border-yellow-200">
|
||||
<h2 className="text-xl font-bold mb-4 text-gray-900">สารบัญ</h2>
|
||||
<nav className="space-y-2">
|
||||
<a href="#section-1" className="block text-gray-700 hover:text-accent-blue transition-colors">1. บทนำ</a>
|
||||
<a href="#section-2" className="block text-gray-700 hover:text-accent-blue transition-colors">2. ข้อมูลส่วนบุคคลที่เก็บรวบรวม</a>
|
||||
<a href="#section-3" className="block text-gray-700 hover:text-accent-blue transition-colors">3. วัตถุประสงค์ในการใช้ข้อมูล</a>
|
||||
<a href="#section-4" className="block text-gray-700 hover:text-accent-blue transition-colors">4. ฐานทางกฎหมายในการประมวลผลข้อมูล</a>
|
||||
<a href="#section-5" className="block text-gray-700 hover:text-accent-blue transition-colors">5. การเปิดเผยข้อมูลให้กับบุคคลที่สาม</a>
|
||||
<a href="#section-6" className="block text-gray-700 hover:text-accent-blue transition-colors">6. การเก็บรักษาข้อมูล</a>
|
||||
<a href="#section-7" className="block text-gray-700 hover:text-accent-blue transition-colors">7. สิทธิของท่าน</a>
|
||||
<a href="#section-8" className="block text-gray-700 hover:text-accent-blue transition-colors">8. Cookie และเทคโนโลยีการติดตาม</a>
|
||||
<a href="#section-9" className="block text-gray-700 hover:text-accent-blue transition-colors">9. ความปลอดภัยของข้อมูล</a>
|
||||
<a href="#section-10" className="block text-gray-700 hover:text-accent-blue transition-colors">10. การแจ้งเหตุละเมิดข้อมูล</a>
|
||||
<a href="#section-11" className="block text-gray-700 hover:text-accent-blue transition-colors">11. เด็กและเยาวชน</a>
|
||||
<a href="#section-12" className="block text-gray-700 hover:text-accent-blue transition-colors">12. การติดต่อ</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Section 1: Introduction */}
|
||||
<h2 id="section-1" className="text-2xl font-bold mb-4 text-gray-900 mt-8">1. บทนำ</h2>
|
||||
<p className="mb-6 text-gray-600">
|
||||
บริษัท มอร์มินิมอร์ จำกัด ("เรา", "ของเรา" หรือ "บริษัท") ให้คำมั่นสัญญาที่จะปกป้องข้อมูลส่วนบุคคลของผู้ใช้บริการ ("ผู้ใช้", "ของคุณ" หรือ "ท่าน") ที่ใช้งานเว็บไซต์ moreminimore.com ("เว็บไซต์") นโยบายความเป็นส่วนตัวฉบับนี้อธิบายถึงวิธีการเก็บรวบรวม ใช้ เปิดเผย และคุ้มครองข้อมูลส่วนบุคคลของท่าน
|
||||
</p>
|
||||
<p className="mb-6 text-gray-600">
|
||||
นโยบายนี้จัดทำขึ้นตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 (PDPA) และกฎหมายที่เกี่ยวข้องของประเทศไทย
|
||||
</p>
|
||||
|
||||
{/* Section 2: Data Collection */}
|
||||
<h2 id="section-2" className="text-2xl font-bold mb-4 text-gray-900 mt-8">2. ข้อมูลส่วนบุคคลที่เก็บรวบรวม</h2>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">2.1 ข้อมูลที่ท่านให้โดยตรง</h3>
|
||||
<p className="mb-4 text-gray-600">
|
||||
เราอาจเก็บรวบรวมข้อมูลส่วนบุคคลต่อไปนี้ที่ท่านให้โดยตรง:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>ข้อมูลการติดต่อ:</strong> ชื่อและนามสกุล, ที่อยู่อีเมล, เบอร์โทรศัพท์, ที่อยู่สำหรับติดต่อ</li>
|
||||
<li><strong>ข้อมูลบัญชีผู้ใช้:</strong> ชื่อผู้ใช้ (Username), รหัสผ่าน (Password), ประวัติการใช้งาน</li>
|
||||
<li><strong>ข้อมูลการชำระเงิน:</strong> ข้อมูลบัตรเครดิต/เดบิต, ข้อมูลบัญชีธนาคาร, ประวัติการทำธุรกรรม</li>
|
||||
</ul>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">2.2 ข้อมูลที่เก็บรวบรวมโดยอัตโนมัติ</h3>
|
||||
<p className="mb-4 text-gray-600">
|
||||
เมื่อท่านใช้งานเว็บไซต์ เราอาจเก็บรวบรวมข้อมูลต่อไปนี้โดยอัตโนมัติ:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>ข้อมูลอุปกรณ์:</strong> ประเภทของอุปกรณ์ (คอมพิวเตอร์, สมาร์ทโฟน, แท็บเล็ต), ระบบปฏิบัติการ, เบราว์เซอร์ที่ใช้, ที่อยู่ IP (ในรูปแบบ hashed)</li>
|
||||
<li><strong>ข้อมูลการใช้งาน:</strong> หน้าเว็บที่ท่านเข้าชม, เวลาและวันที่เข้าชม, ระยะเวลาการใช้งาน, ลิงก์ที่ท่านคลิก, ข้อมูล Cookie</li>
|
||||
</ul>
|
||||
|
||||
{/* Section 3: Purpose */}
|
||||
<h2 id="section-3" className="text-2xl font-bold mb-4 text-gray-900 mt-8">3. วัตถุประสงค์ในการใช้ข้อมูล</h2>
|
||||
<p className="mb-4 text-gray-600">
|
||||
เราใช้ข้อมูลส่วนบุคคลของท่านเพื่อวัตถุประสงค์ดังต่อไปนี้:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>ให้บริการและบำรุงรักษาเว็บไซต์</li>
|
||||
<li>ประมวลผลคำขอและธุรกรรมของท่าน</li>
|
||||
<li>ส่งมอบสินค้าหรือบริการที่ท่านสั่งซื้อ</li>
|
||||
<li>จัดการบัญชีผู้ใช้ของท่าน</li>
|
||||
<li>ตอบกลับคำถามและข้อร้องเรียน</li>
|
||||
<li>ส่งข้อมูลเกี่ยวกับบริการของเรา</li>
|
||||
<li>แจ้งเตือนเกี่ยวกับการอัปเดตหรือการเปลี่ยนแปลง</li>
|
||||
<li>ส่งข่าวสารโปรโมชั่น (หากท่านยินยอม)</li>
|
||||
<li>วิเคราะห์การใช้งานเว็บไซต์และปรับปรุงบริการ</li>
|
||||
<li>ระบุและป้องกันภัยคุกคามด้านความปลอดภัย</li>
|
||||
<li>ปฏิบัติตามข้อกำหนดทางกฎหมาย</li>
|
||||
</ul>
|
||||
|
||||
{/* Section 4: Legal Basis */}
|
||||
<h2 id="section-4" className="text-2xl font-bold mb-4 text-gray-900 mt-8">4. ฐานทางกฎหมายในการประมวลผลข้อมูล</h2>
|
||||
<p className="mb-4 text-gray-600">
|
||||
เราประมวลผลข้อมูลส่วนบุคคลของท่านบนฐานทางกฎหมายดังต่อไปนี้:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>ความยินยอม (Consent):</strong> การส่งข่าวสารทางอีเมล, การใช้ Cookie สำหรับการตลาด</li>
|
||||
<li><strong>การปฏิบัติตามสัญญา (Contract):</strong> การประมวลผลการสั่งซื้อ, การให้บริการที่ท่านร้องขอ</li>
|
||||
<li><strong>หน้าที่ทางกฎหมาย (Legal Obligation):</strong> การเก็บรักษาบันทึกทางการเงิน, การรายงานต่อหน่วยงานราชการ</li>
|
||||
<li><strong>ผลประโยชน์โดยชอบด้วยกฎหมาย (Legitimate Interest):</strong> การป้องกันและตรวจสอบการฉ้อโกง, ความปลอดภัยของเครือข่าย</li>
|
||||
</ul>
|
||||
|
||||
{/* Section 5: Disclosure */}
|
||||
<h2 id="section-5" className="text-2xl font-bold mb-4 text-gray-900 mt-8">5. การเปิดเผยข้อมูลให้กับบุคคลที่สาม</h2>
|
||||
<p className="mb-4 text-gray-600">
|
||||
เราไม่ขายหรือให้เช่าข้อมูลส่วนบุคคลของท่านให้กับบุคคลที่สาม อย่างไรก็ตาม เราอาจเปิดเผยข้อมูลของท่านในกรณีต่อไปนี้:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>ผู้ให้บริการ:</strong> ผู้ให้บริการชำระเงิน, ผู้ให้บริการจัดส่ง, ผู้ให้บริการคลาวด์, ผู้ให้บริการอีเมล, ผู้ให้บริการวิเคราะห์ข้อมูล</li>
|
||||
<li><strong>หน่วยงานราชการ:</strong> ศาล, หน่วยงานบังคับใช้กฎหมาย, หน่วยงานกำกับดูแล, หน่วยงานภาษี</li>
|
||||
<li><strong>การโอนกิจการ:</strong> กรณีควบรวมกิจการหรือขายทรัพย์สิน</li>
|
||||
</ul>
|
||||
|
||||
{/* Section 6: Retention */}
|
||||
<h2 id="section-6" className="text-2xl font-bold mb-4 text-gray-900 mt-8">6. การเก็บรักษาข้อมูล</h2>
|
||||
<p className="mb-4 text-gray-600">
|
||||
เราเก็บรักษาข้อมูลส่วนบุคคลของท่านไว้เฉพาะเท่าที่จำเป็น:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>ข้อมูลบัญชีผู้ใช้:</strong> เก็บรักษาตลอดระยะเวลาที่ท่านเป็นผู้ใช้บริการ และ 10 ปีหลังจากนั้น</li>
|
||||
<li><strong>ข้อมูลธุรกรรม:</strong> 10 ปี ตามข้อกำหนดของกฎหมายภาษี</li>
|
||||
<li><strong>ข้อมูลการติดต่อ:</strong> 10 ปีหลังจากการติดต่อล่าสุด</li>
|
||||
<li><strong>ข้อมูลการใช้งาน (Cookie):</strong> 26 เดือน (สำหรับ Umami Analytics)</li>
|
||||
</ul>
|
||||
|
||||
{/* Section 7: Rights */}
|
||||
<h2 id="section-7" className="text-2xl font-bold mb-4 text-gray-900 mt-8">7. สิทธิของท่าน</h2>
|
||||
<p className="mb-4 text-gray-600">
|
||||
ภายใต้ PDPA ท่านมีสิทธิดังต่อไปนี้เกี่ยวกับข้อมูลส่วนบุคคลของท่าน:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>สิทธิในการเข้าถึง:</strong> ขอสำเนาข้อมูลส่วนบุคคล</li>
|
||||
<li><strong>สิทธิในการแก้ไข:</strong> ขอให้แก้ไขข้อมูลที่ไม่ถูกต้อง</li>
|
||||
<li><strong>สิทธิในการลบ:</strong> ขอให้ลบข้อมูลในกรณีที่ไม่จำเป็นต้องใช้แล้ว หรือถอนความยินยอม</li>
|
||||
<li><strong>สิทธิในการจำกัดการประมวลผล:</strong> ขอให้ระงับการใช้ข้อมูลชั่วคราว</li>
|
||||
<li><strong>สิทธิในการโอนย้ายข้อมูล:</strong> ขอให้โอนข้อมูลไปยังผู้ควบคุมข้อมูลอื่น</li>
|
||||
<li><strong>สิทธิในการคัดค้าน:</strong> คัดค้านการประมวลผลเพื่อประโยชน์โดยชอบด้วยกฎหมาย</li>
|
||||
<li><strong>สิทธิในการถอนความยินยอม:</strong> ถอนความยินยอมเมื่อใดก็ได้</li>
|
||||
<li><strong>สิทธิในการร้องเรียน:</strong> ร้องเรียนต่อสำนักงานคณะกรรมการคุ้มครองข้อมูลส่วนบุคคล (สคส.)</li>
|
||||
</ul>
|
||||
<p className="mb-6 text-gray-600">
|
||||
ในการใช้สิทธิเหล่านี้ กรุณาติดต่อเราที่ <a href="mailto:contact@moreminimore.com" className="text-accent-blue hover:underline">contact@moreminimore.com</a>
|
||||
</p>
|
||||
|
||||
{/* Section 8: Cookies */}
|
||||
<h2 id="section-8" className="text-2xl font-bold mb-4 text-gray-900 mt-8">8. Cookie และเทคโนโลยีการติดตาม</h2>
|
||||
<p className="mb-4 text-gray-600">
|
||||
เราใช้ Cookie และเทคโนโลยีการติดตามเพื่อปรับปรุงประสบการณ์การใช้งานของท่าน:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>Cookie ที่จำเป็น (Necessary):</strong> จำเป็นสำหรับการทำงานของเว็บไซต์ ไม่สามารถปิดใช้งานได้</li>
|
||||
<li><strong>Cookie เพื่อประสิทธิภาพ (Performance):</strong> รวบรวมข้อมูลการใช้เว็บไซต์เพื่อปรับปรุง (ต้องได้รับความยินยอม)</li>
|
||||
<li><strong>Cookie เพื่อการทำงาน (Functional):</strong> จดจำการตั้งค่าของท่าน (ต้องได้รับความยินยอม)</li>
|
||||
<li><strong>Cookie เพื่อการตลาด (Marketing):</strong> ติดตามกิจกรรมการท่องเว็บเพื่อแสดงโฆษณาที่เกี่ยวข้อง (ต้องได้รับความยินยอม)</li>
|
||||
</ul>
|
||||
<p className="mb-6 text-gray-600">
|
||||
ท่านสามารถจัดการการตั้งค่า Cookie ได้ตลอดเวลาผ่านแบนเนอร์คุกกี้บนเว็บไซต์ของเรา หรือศึกษาเพิ่มเติมได้ที่ <Link href="/cookie-policy" className="text-accent-blue hover:underline">นโยบายคุกกี้</Link>
|
||||
</p>
|
||||
|
||||
{/* Section 9: Security */}
|
||||
<h2 id="section-9" className="text-2xl font-bold mb-4 text-gray-900 mt-8">9. ความปลอดภัยของข้อมูล</h2>
|
||||
<p className="mb-4 text-gray-600">
|
||||
เราใช้มาตรการรักษาความปลอดภัยที่เหมาะสมเพื่อปกป้องข้อมูลส่วนบุคคลของท่าน:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>การเข้ารหัส:</strong> ข้อมูลถูกเข้ารหัสระหว่างการส่ง (SSL/TLS)</li>
|
||||
<li><strong>การควบคุมการเข้าถึง:</strong> จำกัดการเข้าถึงข้อมูลเฉพาะผู้ที่จำเป็น</li>
|
||||
<li><strong>Firewall:</strong> ป้องกันการเข้าถึงโดยไม่ได้รับอนุญาต</li>
|
||||
<li><strong>การสำรองข้อมูล:</strong> สำรองข้อมูลเป็นประจำ</li>
|
||||
<li><strong>การตรวจสอบ:</strong> ทบทวนและปรับปรุงมาตรการความปลอดภัยอย่างสม่ำเสมอ</li>
|
||||
</ul>
|
||||
|
||||
{/* Section 10: Breach */}
|
||||
<h2 id="section-10" className="text-2xl font-bold mb-4 text-gray-900 mt-8">10. การแจ้งเหตุละเมิดข้อมูล</h2>
|
||||
<p className="mb-4 text-gray-600">
|
||||
ในกรณีที่มีการละเมิดข้อมูลส่วนบุคคล เราจะ:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>แจ้งสำนักงานคณะกรรมการคุ้มครองข้อมูลส่วนบุคคลภายใน 72 ชั่วโมง</li>
|
||||
<li>แจ้งให้ท่านทราบหากมีความเสี่ยงสูงต่อสิทธิและเสรีภาพของท่าน</li>
|
||||
</ul>
|
||||
|
||||
{/* Section 11: Children */}
|
||||
<h2 id="section-11" className="text-2xl font-bold mb-4 text-gray-900 mt-8">11. เด็กและเยาวชน</h2>
|
||||
<p className="mb-6 text-gray-600">
|
||||
เว็บไซต์ของเราไม่ได้ออกแบบมาสำหรับเด็กอายุต่ำกว่า 20 ปี หากท่านอายุต่ำกว่า 20 ปี กรุณาให้ผู้ปกครองอ่านและยินยอมแทน
|
||||
</p>
|
||||
|
||||
{/* Section 12: Contact */}
|
||||
<h2 id="section-12" className="text-2xl font-bold mb-4 text-gray-900 mt-8">12. การติดต่อ</h2>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">เจ้าหน้าที่คุ้มครองข้อมูลส่วนบุคคล (DPO)</h3>
|
||||
<p className="mb-4 text-gray-600">
|
||||
<strong>อีเมล:</strong> <a href="mailto:contact@moreminimore.com" className="text-accent-blue hover:underline">contact@moreminimore.com</a><br />
|
||||
<strong>โทรศัพท์:</strong> <a href="tel:0809955945" className="text-accent-blue hover:underline">080-995-5945</a><br />
|
||||
<strong>Line:</strong> @539hdlul<br />
|
||||
<strong>ที่อยู่:</strong> 53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120
|
||||
</p>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">หน่วยงานกำกับดูแล</h3>
|
||||
<p className="mb-6 text-gray-600">
|
||||
หากท่านไม่พอใจกับการตอบสนองของเรา ท่านสามารถติดต่อ:
|
||||
</p>
|
||||
<p className="mb-6 text-gray-600">
|
||||
<strong>สำนักงานคณะกรรมการคุ้มครองข้อมูลส่วนบุคคล (สคส.)</strong><br />
|
||||
ที่อยู่: 120 ถนนแจ้งวัฒนะ แขวงทุ่งสองห้อง เขตหลักสี่ กรุงเทพมหานคร 10210<br />
|
||||
โทรศัพท์: 0-2141-6900<br />
|
||||
อีเมล: ocppd@pdpc.or.th<br />
|
||||
เว็บไซต์: <a href="https://www.pdpc.or.th" className="text-accent-blue hover:underline" target="_blank" rel="noopener">www.pdpc.or.th</a>
|
||||
</p>
|
||||
|
||||
{/* Footer Note */}
|
||||
<div className="mt-12 p-6 bg-yellow-50 border-l-4 border-primary rounded">
|
||||
<p className="text-gray-700 text-base">
|
||||
<strong>หมายเหตุ:</strong> เราอาจอัปเดตนโยบายความเป็นส่วนตัวนี้เป็นครั้งคราว การเปลี่ยนแปลงใดๆ จะถูกโพสต์บนหน้านี้พร้อมวันที่อัปเดตใหม่ เราขอแนะนำให้ท่านตรวจสอบหน้านี้เป็นระยะเพื่อรับทราบการเปลี่ยนแปลง
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
31
src/app/(frontend)/services/ai-automation/layout.tsx
Normal file
31
src/app/(frontend)/services/ai-automation/layout.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'บริการ AI Automation | MoreminiMore - Custom AI App และ Chatbot',
|
||||
description: 'ระบบอัตโนมัติด้วย AI ตอบคำถาม ส่งข้อมูล บันทึกออร์เดอร์ 24/7',
|
||||
keywords: 'AI Automation, Custom AI App, Chatbot, Data Integration, AI Analytics, Enterprise Chatbot',
|
||||
openGraph: {
|
||||
title: 'บริการ AI Automation | MoreminiMore - Custom AI App และ Chatbot',
|
||||
description: 'ระบบอัตโนมัติด้วย AI ตอบคำถาม ส่งข้อมูล บันทึกออร์เดอร์ 24/7',
|
||||
url: 'https://moreminimore.com/services/ai-automation',
|
||||
siteName: 'MoreminiMore',
|
||||
locale: 'th_TH',
|
||||
type: 'website',
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: 'บริการ AI Automation | MoreminiMore - Custom AI App และ Chatbot',
|
||||
description: 'ระบบอัตโนมัติด้วย AI ตอบคำถาม ส่งข้อมูล บันทึกออร์เดอร์ 24/7',
|
||||
},
|
||||
alternates: {
|
||||
canonical: 'https://moreminimore.com/services/ai-automation',
|
||||
},
|
||||
}
|
||||
|
||||
export default function AIAutomationLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return children
|
||||
}
|
||||
511
src/app/(frontend)/services/ai-automation/page.tsx
Normal file
511
src/app/(frontend)/services/ai-automation/page.tsx
Normal file
@@ -0,0 +1,511 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect } from 'react'
|
||||
|
||||
export default function AIAutomationPage() {
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible')
|
||||
}
|
||||
})
|
||||
},
|
||||
{ threshold: 0.1, rootMargin: '0px 0px -50px 0px' }
|
||||
)
|
||||
|
||||
document.querySelectorAll('.reveal, .reveal-left, .reveal-right').forEach((el) => {
|
||||
observer.observe(el)
|
||||
})
|
||||
|
||||
return () => observer.disconnect()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "LocalBusiness",
|
||||
"name": "MoreminiMore Co.,Ltd.",
|
||||
"description": "บริการ AI Automation สำหรับ SME ไทย ระบบเชื่อมข้อมูลจากหลายแอปเข้าด้วยกัน วิเคราะห์ข้อมูล สร้างรายงาน แจ้งเตือนอัตโนมัติ พร้อม Chatbot ภายในองค์กร",
|
||||
"telephone": "+668****5945",
|
||||
"email": "contact@moreminimore.com",
|
||||
"url": "https://www.moreminimore.com/services/ai-automation",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "53 หมู่ 1 ต.บ้านแพ้ว",
|
||||
"addressLocality": "บ้านแพ้ว",
|
||||
"addressRegion": "สมุทรสาคร",
|
||||
"postalCode": "74120",
|
||||
"addressCountry": "TH"
|
||||
},
|
||||
"geo": {
|
||||
"@type": "GeoCoordinates",
|
||||
"latitude": 13.5497,
|
||||
"longitude": 100.4167
|
||||
},
|
||||
"openingHours": "Mo-Fr 09:00-18:00",
|
||||
"priceRange": "$$",
|
||||
"serviceType": ["AI Automation", "Data Integration", "AI Analytics", "Enterprise Chatbot"]
|
||||
})
|
||||
}}
|
||||
/>
|
||||
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
"mainEntity": [
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "AI Automation ต่างจาก Marketing Automation อย่างไร?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "AI Automation เน้นการทำ automation ภายในองค์กร เช่น เชื่อมข้อมูล, วิเคราะห์, รายงาน, Chatbot ภายใน Marketing Automation เน้นการทำ automation ภายนอกองค์กร เช่น การตลาดผ่าน Website, Social Media, Ads, Email"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "สามารถเชื่อมต่อกับระบบที่มีอยู่แล้วได้ไหม?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "ได้! เราสามารถเชื่อมต่อกับระบบที่คุณมีอยู่แล้ว เช่น ERP, CRM, POS, ระบบบัญชี หรือโปรแกรมอื่น ๆ ผ่าน API หรือการสกัดข้อมูล"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "ต้องมีความรู้ด้านเทคนิคไหม?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "ไม่ต้องมีความรู้ด้านเทคนิคเลย! เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ใช้งานระบบตามปกติ"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "ใช้เวลาพัฒนานานเท่าไหร่?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "ระยะเวลาขึ้นอยู่กับความซับซ้อนของระบบ ตั้งแต่ 2-4 สัปดาห์สำหรับระบบพื้นฐาน ไปจนถึง 2-3 เดือนสำหรับระบบที่ซับซ้อน เราจะแจ้งระยะเวลาที่ชัดเจนตั้งแต่เริ่มต้น"
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}}
|
||||
/>
|
||||
|
||||
<section id="hero" class="relative overflow-hidden min-h-[60vh] flex items-center">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-indigo-600 via-purple-600 to-purple-800">
|
||||
<div class="absolute top-20 left-10 w-72 h-72 bg-white/20 rounded-full blur-3xl animate-float-1"></div>
|
||||
<div class="absolute bottom-20 right-10 w-96 h-96 bg-indigo-300/20 rounded-full blur-3xl animate-float-2"></div>
|
||||
<div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/10 rounded-full blur-2xl animate-float-3"></div>
|
||||
<div class="absolute bottom-1/3 right-1/4 w-64 h-64 bg-purple-200/20 rounded-full blur-2xl animate-float-1" style={{ animationDelay: '0.75s' }}></div>
|
||||
</div>
|
||||
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div class="absolute top-1/4 left-[10%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-1"></div>
|
||||
<div class="absolute top-1/3 left-[80%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2"></div>
|
||||
<div class="absolute top-2/3 left-[20%] w-4 h-4 bg-white/20 rounded-full animate-float-dot-3"></div>
|
||||
<div class="absolute bottom-1/4 left-[70%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-1" style={{ animationDelay: '1s' }}></div>
|
||||
<div class="absolute top-1/2 left-[40%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2" style={{ animationDelay: '0.5s' }}></div>
|
||||
<div class="absolute bottom-1/3 left-[85%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-3" style={{ animationDelay: '1.5s' }}></div>
|
||||
</div>
|
||||
|
||||
<div class="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: 'linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px)', backgroundSize: '50px 50px' }}></div>
|
||||
|
||||
<div class="container mx-auto px-4 relative z-10 py-16">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="text-center lg:text-left">
|
||||
<div class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full mb-6 animate-fade-in">
|
||||
<span class="w-2 h-2 bg-indigo-300 rounded-full animate-pulse"></span>
|
||||
<span class="text-sm font-medium text-white">ระบบเชื่อมข้อมูลและวิเคราะห์ด้วย AI</span>
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight animate-fade-in-up" style={{ animationDelay: '0.1s' }}>
|
||||
เชื่อมข้อมูล<br/>
|
||||
<span class="text-white">วิเคราะห์ด้วย AI</span><br/>
|
||||
สร้างรายงานอัตโนมัติ
|
||||
</h1>
|
||||
|
||||
<p class="text-lg md:text-xl text-white/90 mb-10 max-w-xl mx-auto lg:mx-0 leading-relaxed animate-fade-in-up" style={{ animationDelay: '0.2s' }}>
|
||||
ระบบเชื่อมข้อมูลจากหลายแอปเข้าด้วยกัน วิเคราะห์ข้อมูล<br/>
|
||||
สร้างรายงาน แจ้งเตือนอัตโนมัติ พร้อม Chatbot ภายในองค์กร
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start items-center animate-fade-in-up" style={{ animationDelay: '0.3s' }}>
|
||||
<a href="tel:0809955945" class="group bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl flex items-center gap-3">
|
||||
<svg class="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
|
||||
</svg>
|
||||
โทรหาเรา
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="group bg-black/30 backdrop-blur-sm text-white border-2 border-white/40 px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-black transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl flex items-center gap-3">
|
||||
<img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5 group-hover:animate-bounce" />
|
||||
สอบถามรายละเอียด
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 pt-6 border-t border-white/20 animate-fade-in-up" style={{ animationDelay: '0.4s' }}>
|
||||
<div class="flex flex-wrap justify-center lg:justify-start gap-6 text-white text-sm">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-indigo-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
ปรึกษาฟรี
|
||||
</span>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-indigo-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
เชื่อมทุกระบบ
|
||||
</span>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-indigo-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
วิเคราะห์อัจฉริยะ
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reveal scale">
|
||||
<img
|
||||
src="/images/hero/ai-automation-hero.jpg"
|
||||
alt="ระบบ AI Automation สำหรับธุรกิจ - เชื่อมข้อมูลและวิเคราะห์ด้วย AI"
|
||||
class="w-full h-auto rounded-2xl shadow-2xl"
|
||||
loading="eager"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="reveal py-20 bg-gradient-to-b from-gray-50 to-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
บริการของเรา
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
|
||||
AI Automation ครบวงจรสำหรับธุรกิจไทย
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">เขียนแอป AI เฉพาะ</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• พัฒนา Application ตามความต้องการ</li>
|
||||
<li>• ระบบ AI เฉพาะทางธุรกิจ</li>
|
||||
<li>• รวม AI เข้ากับระบบเดิม</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">เชื่อมข้อมูลหลายแอป</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• รวมข้อมูลจากทุกแพลตฟอร์ม</li>
|
||||
<li>• Sync ข้อมูลอัตโนมัติ</li>
|
||||
<li>• รวมศูนย์ข้อมูลองค์กร</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">วิเคราะห์ → รายงาน</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• AI วิเคราะห์ข้อมูลอัจฉริยะ</li>
|
||||
<li>• สร้างรายงานอัตโนมัติ</li>
|
||||
<li>• แจ้งเตือนและส่งต่อข้อมูล</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">Chatbot ภายในองค์กร</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• ตอบคำถามพนักงาน 24/7</li>
|
||||
<li>• ค้นหาข้อมูลจากเอกสาร</li>
|
||||
<li>• ช่วยงานฝ่าย HR และ IT</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="reveal py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
ทำไมต้องเลือกเรา?
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
|
||||
เรามีความเชี่ยวชาญในการเชื่อมระบบและวิเคราะห์ข้อมูลด้วย AI
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">เชื่อมต่อทุกระบบ</h3>
|
||||
<p class="text-gray-600">
|
||||
เชื่อมข้อมูลจากทุกแอปที่คุณใช้ ไม่ว่าจะเป็น ERP, CRM, ระบบบัญชี, POS หรือโปรแกรมอื่น ๆ เข้าด้วยกัน
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">วิเคราะห์อัจฉริยะ</h3>
|
||||
<p class="text-gray-600">
|
||||
AI วิเคราะห์ข้อมูลทั้งหมดและหา insights ที่เป็นประโยชน์ต่อธุรกิจ พร้อมแนะนำวิธีปรับปรุง
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">แจ้งเตือนอัตโนมัติ</h3>
|
||||
<p class="text-gray-600">
|
||||
ระบบแจ้งเตือนอัตโนมัติเมื่อมีสิ่งสำคัญ เช่น ยอดขายต่ำกว่ากำหนด สินค้าใกล้หมด หรือต้องติดตามลูกค้า
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="reveal py-20 bg-gray-50">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
ตัวอย่างการใช้งาน
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
กรณีศึกษาการใช้ AI Automation ในธุรกิจจริง
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<h3 class="font-bold text-gray-900 mb-2">ร้านค้าออนไลน์</h3>
|
||||
<p class="text-gray-600 text-sm">เชื่อมข้อมูลจาก Shopee, Lazada, JD สร้างรายงานยอดขายรวม วิเคราะห์สินค้าขายดี แจ้งเตือนเมื่อสินค้าใกล้หมด พร้อม Chatbot ตอบคำถามลูกค้า</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<h3 class="font-bold text-gray-900 mb-2">โรงพยาบาล/คลินิก</h3>
|
||||
<p class="text-gray-600 text-sm">เชื่อมข้อมูล HIS, LIS, RIS วิเคราะห์ผลตรวจแลป สร้างรายงานสรุปสำหรับแพทย์ แจ้งเตือนผลผิดปกติ และนัดหมายซ้ำอัตโนมัติ</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<h3 class="font-bold text-gray-900 mb-2">ร้านอาหาร/เชน</h3>
|
||||
<p class="text-gray-600 text-sm">เชื่อมข้อมูล POS ทุกสาขา รวมยอดขายอัตโนมัติ วิเคราะห์ยอดขายแต่ละเมนู สั่งซื้อวัตถุดิบอัตโนมัติตามคลัง</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<h3 class="font-bold text-gray-900 mb-2">บริษัทขนส่ง</h3>
|
||||
<p class="text-gray-600 text-sm">เชื่อมข้อมูล Tracking, Fleet Management, Billing วิเคราะห์เส้นทางที่ดีที่สุด คำนวณค่าใช้จ่ายอัตโนมัติ แจ้งเตือนรถซ่อม</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<h3 class="font-bold text-gray-900 mb-2">บริษัทประกัน</h3>
|
||||
<p class="text-gray-600 text-sm">เชื่อมข้อมูลเคลม, การขาย, CRM วิเคราะห์ความเสี่ยง สร้างรายงานประจำเดือน แจ้งเตือนต่ออายุกรมชีนิ</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<h3 class="font-bold text-gray-900 mb-2">โรงแรม/รีสอร์ท</h3>
|
||||
<p class="text-gray-600 text-sm">เชื่อมข้อมูล Booking, PMS, POS วิเคราะห์อัตราการเข้าพัก รายได้ต่อห้อง แจ้งเตือนรีวิวลบ และติดตามลูกค้า VIP</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<h3 class="font-bold text-gray-900 mb-2">บริษัทก่อสร้าง</h3>
|
||||
<p class="text-gray-600 text-sm">เชื่อมข้อมูลประมูลงาน, ค่าใช้จ่ายโครงการ, การจ่ายเงิน วิเคราะห์กำไรขาดทุนแต่ละโครงการ แจ้งเตือนการจ่ายเงิน</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<h3 class="font-bold text-gray-900 mb-2">สถาบันการศึกษา</h3>
|
||||
<p class="text-gray-600 text-sm">เชื่อมข้อมูลนักเรียน, ค่าเทอม, การเรียน วิเคราะห์อัตราการคงอยู่ สร้างรายงานผลการเรียน แจ้งเตือนนักเรียนหยุดเรียน</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<h3 class="font-bold text-gray-900 mb-2">ธุรกิจอสังหาริมทรัพย์</h3>
|
||||
<p class="text-gray-600 text-sm">เชื่อมข้อมูล Lead, การดูโปรเจกต์, การปิดการขาย วิเคราะห์ Lead Scoring แจ้งเตือนติดตามลูกค้า สร้างรายงานประจำเดือน</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<h3 class="font-bold text-gray-900 mb-2">โรงงานผลิต</h3>
|
||||
<p class="text-gray-600 text-sm">เชื่อมข้อมูล ERP, MES, QC วิเคราะห์ประสิทธิภาพการผลิต ตรวจสอบคุณภาพอัตโนมัติ แจ้งเตือนเมื่อเครื่องจักรผิดปกติ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="reveal py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
ขั้นตอนการทำงาน
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
กระบวนการทำงานที่ชัดเจน
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-4 gap-4">
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-indigo-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">1</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">วิเคราะห์</h3>
|
||||
<p class="text-sm text-gray-600">วิเคราะห์ระบบที่มีและความต้องการ</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-indigo-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">2</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">ออกแบบ</h3>
|
||||
<p class="text-sm text-gray-600">ออกแบบ Flow และระบบเชื่อมต่อ</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-indigo-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">3</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">พัฒนา</h3>
|
||||
<p class="text-sm text-gray-600">พัฒนาและเชื่อมต่อระบบ</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-indigo-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">4</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">ส่งมอบ</h3>
|
||||
<p class="text-sm text-gray-600">สอนการใช้งานและดูแลต่อเนื่อง</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="reveal py-20 bg-gray-50">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
คำถามที่พบบ่อย
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
คำถามที่ลูกค้ามักถามเกี่ยวกับบริการ
|
||||
</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">AI Automation ต่างจาก Marketing Automation อย่างไร?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shapeRendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p><strong>AI Automation</strong> เน้นการทำ automation ภายในองค์กร เช่น เชื่อมข้อมูล, วิเคราะห์, รายงาน, Chatbot ภายใน<br/>
|
||||
<strong>Marketing Automation</strong> เน้นการทำ automation ภายนอกองค์กร เช่น การตลาดผ่าน Website, Social Media, Ads, Email</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">สามารถเชื่อมต่อกับระบบที่มีอยู่แล้วได้ไหม?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shapeRendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p>ได้! เราสามารถเชื่อมต่อกับระบบที่คุณมีอยู่แล้ว เช่น ERP, CRM, POS, ระบบบัญชี หรือโปรแกรมอื่น ๆ ผ่าน API หรือการสกัดข้อมูล</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">ต้องมีความรู้ด้านเทคนิคไหม?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shapeRendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p><strong>ไม่ต้องมีความรู้ด้านเทคนิคเลย!</strong> เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ใช้งานระบบตามปกติ</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">ใช้เวลาพัฒนานานเท่าไหร่?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shapeRendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p>ระยะเวลาขึ้นอยู่กับความซับซ้อนของระบบ ตั้งแต่ 2-4 สัปดาห์สำหรับระบบพื้นฐาน ไปจนถึง 2-3 เดือนสำหรับระบบที่ซับซ้อน เราจะแจ้งระยะเวลาที่ชัดเจนตั้งแต่เริ่มต้น</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="reveal py-12 bg-white border-t border-gray-100">
|
||||
<div class="container mx-auto px-4 max-w-4xl text-center">
|
||||
<h3 class="text-lg font-bold mb-6 text-gray-900">บริการที่เกี่ยวข้อง</h3>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="/services/marketing-automation" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md">Marketing Automation</a>
|
||||
<a href="/services/web-development" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md">พัฒนาเว็บไซต์</a>
|
||||
<a href="/services/tech-consult" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md">Tech Consult</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="cta" class="reveal py-20 bg-[#fed400]">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-black">
|
||||
พร้อมเชื่อมระบบและวิเคราะห์ข้อมูลด้วย AI แล้วหรือยัง?
|
||||
</h2>
|
||||
<p class="text-xl mb-8 max-w-2xl mx-auto text-gray-800">
|
||||
ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราพร้อมช่วยคุณสร้างระบบ AI Automation ที่ตอบโจทย์
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="tel:0809955945" class="group bg-black text-[#fed400] px-8 py-4 rounded-full font-bold text-lg hover:bg-black/80 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl inline-flex items-center justify-center gap-3">
|
||||
<svg class="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
|
||||
</svg>
|
||||
080-995-5945
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="group bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl inline-flex items-center justify-center gap-3">
|
||||
<img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5 group-hover:animate-bounce" />
|
||||
สอบถามรายละเอียด
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export function generateStaticParams() {
|
||||
return [
|
||||
{ slug: 'ai-automation' }
|
||||
]
|
||||
}
|
||||
31
src/app/(frontend)/services/marketing-automation/layout.tsx
Normal file
31
src/app/(frontend)/services/marketing-automation/layout.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'บริการ Marketing Automation + GEO | MoreminiMore - ระบบอัตโนมัติทางการตลาด',
|
||||
description: 'ระบบการตลาดอัตโนมัติ รวม SEO, LINE, Facebook, Email + GEO ติด AI Search',
|
||||
keywords: 'Marketing Automation, LINE OA, Facebook Messenger, Email Marketing, SEO, GEO, AI Search',
|
||||
openGraph: {
|
||||
title: 'บริการ Marketing Automation + GEO | MoreminiMore - ระบบอัตโนมัติทางการตลาด',
|
||||
description: 'ระบบการตลาดอัตโนมัติ รวม SEO, LINE, Facebook, Email + GEO ติด AI Search',
|
||||
url: 'https://moreminimore.com/services/marketing-automation',
|
||||
siteName: 'MoreminiMore',
|
||||
locale: 'th_TH',
|
||||
type: 'website',
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: 'บริการ Marketing Automation + GEO | MoreminiMore - ระบบอัตโนมัติทางการตลาด',
|
||||
description: 'ระบบการตลาดอัตโนมัติ รวม SEO, LINE, Facebook, Email + GEO ติด AI Search',
|
||||
},
|
||||
alternates: {
|
||||
canonical: 'https://moreminimore.com/services/marketing-automation',
|
||||
},
|
||||
}
|
||||
|
||||
export default function MarketingAutomationLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return children
|
||||
}
|
||||
609
src/app/(frontend)/services/marketing-automation/page.tsx
Normal file
609
src/app/(frontend)/services/marketing-automation/page.tsx
Normal file
@@ -0,0 +1,609 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect } from 'react'
|
||||
|
||||
export default function MarketingAutomationPage() {
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible')
|
||||
}
|
||||
})
|
||||
},
|
||||
{ threshold: 0.1, rootMargin: '0px 0px -50px 0px' }
|
||||
)
|
||||
|
||||
document.querySelectorAll('.reveal, .reveal-left, .reveal-right').forEach((el) => {
|
||||
observer.observe(el)
|
||||
})
|
||||
|
||||
return () => observer.disconnect()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Schema.org Structured Data */}
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "LocalBusiness",
|
||||
"name": "MoreminiMore Co.,Ltd.",
|
||||
"description": "บริการ Marketing Automation สำหรับ SME ไทย การตลาดอัตโนมัติทุกช่องทาง Website, Social Media, Ads, Email พร้อม GEO รองรับ AI Search และ AI วิเคราะห์",
|
||||
"telephone": "+668****5945",
|
||||
"email": "contact@moreminimore.com",
|
||||
"url": "https://www.moreminimore.com/services/marketing-automation",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "53 หมู่ 1 ต.บ้านแพ้ว",
|
||||
"addressLocality": "บ้านแพ้ว",
|
||||
"addressRegion": "สมุทรสาคร",
|
||||
"postalCode": "74120",
|
||||
"addressCountry": "TH"
|
||||
},
|
||||
"geo": {
|
||||
"@type": "GeoCoordinates",
|
||||
"latitude": 13.5497,
|
||||
"longitude": 100.4167
|
||||
},
|
||||
"openingHours": "Mo-Fr 09:00-18:00",
|
||||
"priceRange": "$$",
|
||||
"serviceType": ["Marketing Automation", "Digital Marketing", "AI Analytics", "GEO Optimization"]
|
||||
})
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* FAQPage Schema */}
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
"mainEntity": [
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Marketing Automation ต่างจาก AI Automation อย่างไร?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "AI Automation เน้นการทำ automation ภายในองค์กร เช่น ระบบตอบคำถาม การประมวลผลข้อมูล Marketing Automation เน้นการทำ automation ภายนอกองค์กร เช่น การตลาดผ่าน Website, Social Media, Ads, Email"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "ราคารวมค่าโฆษณาด้วยไหม?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "ไม่รวมค่าโฆษณา ลูกค้าเป็นเจ้าของบัญชีโฆษณาเองและจ่ายค่าโฆษณาแยกต่างหาก เราเป็นเพียง Agency ที่เข้าไปบริหารจัดการให้"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "ต้องมีความรู้ด้านเทคนิคไหม?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "ไม่ต้องมีความรู้ด้านเทคนิคเลย! เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ให้ข้อมูลและดูผลลัพธ์"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "AI วิเคราะห์อะไรบ้าง?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "AI วิเคราะห์พฤติกรรมลูกค้า หาช่องว่างทางการตลาด แนะนำวิธีปรับปรุง วิเคราะห์ผลแคมเปญ และอื่น ๆ ตามความเหมาะสม"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "GEO คืออะไร?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "GEO (Generative Engine Optimization) คือการปรับแต่งเนื้อหาให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews ทำให้ธุรกิจของคุณปรากฏในคำตอบของ AI"
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Hero Section - Green Theme */}
|
||||
<section id="hero" class="relative overflow-hidden min-h-[60vh] flex items-center">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-green-500 via-green-600 to-green-700">
|
||||
<div class="absolute top-20 left-10 w-72 h-72 bg-white/10 rounded-full blur-3xl animate-float-1"></div>
|
||||
<div class="absolute bottom-20 right-10 w-96 h-96 bg-green-300/10 rounded-full blur-3xl animate-float-2"></div>
|
||||
<div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/5 rounded-full blur-2xl animate-float-3"></div>
|
||||
<div class="absolute bottom-1/3 right-1/4 w-64 h-64 bg-green-200/10 rounded-full blur-2xl animate-float-1" style={{ animationDelay: '0.75s' }}></div>
|
||||
</div>
|
||||
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div class="absolute top-1/4 left-[10%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-1"></div>
|
||||
<div class="absolute top-1/3 left-[80%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2"></div>
|
||||
<div class="absolute top-2/3 left-[20%] w-4 h-4 bg-white/20 rounded-full animate-float-dot-3"></div>
|
||||
<div class="absolute bottom-1/4 left-[70%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-1" style={{ animationDelay: '1s' }}></div>
|
||||
<div class="absolute top-1/2 left-[40%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2" style={{ animationDelay: '0.5s' }}></div>
|
||||
<div class="absolute bottom-1/3 left-[85%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-3" style={{ animationDelay: '1.5s' }}></div>
|
||||
</div>
|
||||
|
||||
<div class="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: 'linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px)', backgroundSize: '50px 50px' }}></div>
|
||||
|
||||
<div class="container mx-auto px-4 relative z-10 py-16">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<div class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full mb-6 animate-fade-in">
|
||||
<span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
|
||||
<span class="text-sm font-medium text-white/90">บริการ Marketing Automation ครบวงจร</span>
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight animate-fade-in-up" style={{ animationDelay: '0.1s' }}>
|
||||
การตลาดอัตโนมัติ<br/>
|
||||
<span class="text-white">ทุกช่องทาง</span><br/>
|
||||
พร้อม AI วิเคราะห์
|
||||
</h1>
|
||||
|
||||
<p class="text-lg md:text-xl text-white/80 mb-10 max-w-2xl mx-auto leading-relaxed animate-fade-in-up" style={{ animationDelay: '0.2s' }}>
|
||||
ส่งข้อความอัตโนมัติ วิเคราะห์ข้อมูล SEO ติด Google<br/>
|
||||
ครอบคลุม Website, Social Media, Ads และ Email<br/>
|
||||
<span class="text-purple-200 font-medium">+ GEO ติด ChatGPT, Perplexity, AI Search</span>
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center animate-fade-in-up" style={{ animationDelay: '0.3s' }}>
|
||||
<a href="tel:0809955945" class="group bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl flex items-center gap-3">
|
||||
<svg class="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
|
||||
</svg>
|
||||
โทรหาเรา
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="group bg-black/20 backdrop-blur-sm text-white border-2 border-white/30 px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-black transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl flex items-center gap-3">
|
||||
<img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5 group-hover:animate-bounce" />
|
||||
สอบถามราคา
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 pt-6 border-t border-white/20 animate-fade-in-up" style={{ animationDelay: '0.4s' }}>
|
||||
<div class="flex flex-wrap justify-center gap-6 text-white/80 text-sm">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-green-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
ปรึกษาฟรี
|
||||
</span>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-green-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
AI วิเคราะห์
|
||||
</span>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-green-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
ราคาเหมาะสม
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* What We Do */}
|
||||
<section class="reveal py-20 bg-gradient-to-b from-gray-50 to-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
เราทำอะไรบ้าง?
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
|
||||
การตลาดอัตโนมัติครบทุกช่องทาง พร้อม AI วิเคราะห์ให้คุณ
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">Website + SEO</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• สร้างบทความด้วย AI</li>
|
||||
<li>• SEO ติด Google อันดับ</li>
|
||||
<li>• วิเคราะห์คีย์เวิร์ด</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border-2 border-green-200">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">GEO</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• ปรากฏใน AI Search</li>
|
||||
<li>• ติด ChatGPT, Perplexity</li>
|
||||
<li>• Schema markup ครบ</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">Social Media</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• โพสต์ตาม Content Plan</li>
|
||||
<li>• Chatbot ตอบคำถาม</li>
|
||||
<li>• วิเคราะห์ Engagement</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"></path>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">โฆษณา</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• Google Ads</li>
|
||||
<li>• Facebook Ads</li>
|
||||
<li>• บริหารจัดการแทน</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">Email</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• สร้างอีเมล์ด้วย AI</li>
|
||||
<li>• ตอบกลับอัตโนมัติ</li>
|
||||
<li>• วิเคราะห์ผล</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Why Choose Us */}
|
||||
<section class="reveal py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
ทำไมต้องเลือกเรา?
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
|
||||
เรามีความเชี่ยวชาญในการทำการตลาดอัตโนมัติให้ธุรกิจของคุณ
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">AI วิเคราะห์อัจฉริยะ</h3>
|
||||
<p class="text-gray-600">
|
||||
AI วิเคราะห์ข้อมูลและหาช่องว่างทางการตลาดให้คุณ พร้อมแนะนำวิธีปรับปรุง
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">อัตโนมัติครบวงจร</h3>
|
||||
<p class="text-gray-600">
|
||||
ระบบทำงานอัตโนมัติทุกช่องทาง ตั้งแต่ Website จนถึง Email ไม่ต้องทำเอง
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">วัดผลได้ชัดเจน</h3>
|
||||
<p class="text-gray-600">
|
||||
ดูผลการตลาดได้ตลอดเวลา รู้ว่าอะไรเวิร์ค อะไรไม่เวิร์ค พร้อมปรับปรุง
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
<section class="reveal py-20 bg-gray-50">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
ตัวอย่างการใช้งาน
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
AI วิเคราะห์และการตลาดอัตโนมัติให้ธุรกิจต่าง ๆ มากกว่า 50+ ราย
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
||||
</svg>
|
||||
<h3 class="font-bold text-gray-900">ร้านค้าออนไลน์</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">AI วิเคราะห์พฤติกรรมลูกค้า + แนะนำสินค้าเฉพาะบุคคล + ติดตามตะกร้า</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
<h3 class="font-bold text-gray-900">คลินิก/สถานพยาบาล</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">AI วิเคราะห์ pattern คนไม่มานัด + ปรับปรุงการนัดหมาย + เตือนอัจฉริยะ</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
<h3 class="font-bold text-gray-900">ร้านอาหาร</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">AI วิเคราะห์ความชอบลูกค้า + ส่งโปรโมชันตรงกลุ่ม + วิเคราะห์ยอดขาย</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 14l9-5-9-5-9 5 9 5z"></path>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path>
|
||||
</svg>
|
||||
<h3 class="font-bold text-gray-900">โรงเรียน/สถาบันการศึกษา</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">AI วิเคราะห์ trend การสมัครเรียน + หาแคมเปญที่ได้ผล + ติดตามผู้ปกครอง</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<h3 class="font-bold text-gray-900">ธุรกิจบริการ</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">AI วิเคราะห์ Customer Lifetime Value + ส่งข้อความตามความถี่ที่เหมาะสม</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
|
||||
</svg>
|
||||
<h3 class="font-bold text-gray-900">อสังหาริมทรัพย์</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">AI วิเคราะห์ Lead Scoring + ติดตามลูกค้าที่มีโอกาสซื้อสูง + ส่งข้อมูลตรงใจ</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||||
</svg>
|
||||
<h3 class="font-bold text-gray-900">Startup/SaaS</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">AI วิเคราะห์ User Behavior + ปรับ Onboarding ให้ตรงกลุ่ม + ลด churn rate</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
<h3 class="font-bold text-gray-900">Agency/ที่ปรึกษา</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">AI วิเคราะห์ผลแคมเปญ + แนะนำวิธีปรับปรุง + รายงานอัตโนมัติ</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
|
||||
</svg>
|
||||
<h3 class="font-bold text-gray-900">Healthcare/Wellness</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">AI วิเคราะห์การกลับมาใช้บริการ + ส่งข้อความกระตุ้นให้กลับมา</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
|
||||
</svg>
|
||||
<h3 class="font-bold text-gray-900">E-learning</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">AI วิเคราะห์พฤติกรรมการเรียน + ส่งเนื้อหาที่ตรงความต้องการ + ติดตามความก้าวหน้า</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Process */}
|
||||
<section class="reveal py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
ขั้นตอนการทำงาน
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
กระบวนการทำงานที่ชัดเจน
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-4 gap-4">
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">1</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">วิเคราะห์</h3>
|
||||
<p class="text-sm text-gray-600">วิเคราะห์ธุรกิจและการตลาด</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">2</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">วางแผน</h3>
|
||||
<p class="text-sm text-gray-600">วาง Content Plan และ Strategy</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">3</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">ตั้งค่า</h3>
|
||||
<p class="text-sm text-gray-600">ติดตั้งระบบอัตโนมัติ</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">4</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">วิเคราะห์</h3>
|
||||
<p class="text-sm text-gray-600">AI วิเคราะห์และปรับปรุง</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ */}
|
||||
<section class="reveal py-20 bg-gray-50">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
คำถามที่พบบ่อย
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
คำถามที่ลูกค้ามักถามเกี่ยวกับบริการ
|
||||
</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">Marketing Automation ต่างจาก AI Automation อย่างไร?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shapeRendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p><strong>AI Automation</strong> เน้นการทำ automation ภายในองค์กร เช่น ระบบตอบคำถาม, การประมวลผลข้อมูล<br/>
|
||||
<strong>Marketing Automation</strong> เน้นการทำ automation ภายนอกองค์กร เช่น การตลาดผ่าน Website, Social Media, Ads, Email</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">ราคารวมค่าโฆษณาด้วยไหม?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shapeRendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p>ไม่รวมค่าโฆษณา ลูกค้าเป็นเจ้าของบัญชีโฆษณาเองและจ่ายค่าโฆษณาแยกต่างหาก เราเป็นเพียง Agency ที่เข้าไปบริหารจัดการให้</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">ต้องมีความรู้ด้านเทคนิคไหม?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shapeRendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p><strong>ไม่ต้องมีความรู้ด้านเทคนิคเลย!</strong> เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ให้ข้อมูลและดูผลลัพธ์</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">AI วิเคราะห์อะไรบ้าง?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shapeRendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p>AI วิเคราะห์พฤติกรรมลูกค้า, หาช่องว่างทางการตลาด, แนะนำวิธีปรับปรุง, วิเคราะห์ผลแคมเปญ และอื่น ๆ ตามความเหมาะสม</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden border-2 border-purple-100">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">GEO คืออะไร? ต่างจาก SEO อย่างไร?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shapeRendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p><strong>GEO (Generative Engine Optimization)</strong> คือการปรับแต่งเนื้อหาให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews<br/>
|
||||
<strong>SEO</strong> ทำให้ติด Google ปกติ<br/>
|
||||
<strong>GEO</strong> ทำให้ปรากฏในคำตอบของ AI<br/>
|
||||
เราทำทั้งสองอย่างคู่กัน — เนื้อหาที่เขียนดีด้วย AI จะได้ทั้ง Google และ AI Search</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Related Services */}
|
||||
<section class="reveal py-12 bg-white border-t border-gray-100">
|
||||
<div class="container mx-auto px-4 max-w-4xl text-center">
|
||||
<h3 class="text-lg font-bold mb-6 text-gray-900">บริการที่เกี่ยวข้อง</h3>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="/services/ai-automation" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md inline-flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
|
||||
</svg>
|
||||
AI Automation
|
||||
</a>
|
||||
<a href="/services/web-development" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md inline-flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
|
||||
</svg>
|
||||
พัฒนาเว็บไซต์
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section - Yellow */}
|
||||
<section id="cta" class="reveal py-20 bg-[#fed400]">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-black">
|
||||
พร้อมเพิ่มประสิทธิภาพการตลาดแล้วหรือยัง?
|
||||
</h2>
|
||||
<p class="text-xl mb-8 max-w-2xl mx-auto text-gray-800">
|
||||
ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราพร้อมช่วยคุณสร้างระบบการตลาดอัตโนมัติที่ตอบโจทย์
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="tel:0809955945" class="group bg-black text-[#fed400] px-8 py-4 rounded-full font-bold text-lg hover:bg-black/80 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl inline-flex items-center justify-center gap-3">
|
||||
<svg class="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
|
||||
</svg>
|
||||
080-995-5945
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="group bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl inline-flex items-center justify-center gap-3">
|
||||
<img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5 group-hover:animate-bounce" />
|
||||
สอบถามราคา
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export function generateStaticParams() {
|
||||
return [
|
||||
{ slug: 'marketing-automation' }
|
||||
]
|
||||
}
|
||||
31
src/app/(frontend)/services/tech-consult/layout.tsx
Normal file
31
src/app/(frontend)/services/tech-consult/layout.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'บริการ Tech Consult | MoreminiMore - คำปรึกษาระบบ IT และ Cloud',
|
||||
description: 'บริการให้คำปรึกษาระบบ IT และ Cloud สำหรับธุรกิจ SMEs เลือกเครื่องมือที่เหมาะกับงบประมาณ',
|
||||
keywords: 'Tech Consult, ที่ปรึกษา IT, Cloud, Infrastructure, SMEs ไทย',
|
||||
openGraph: {
|
||||
title: 'บริการ Tech Consult | MoreminiMore - คำปรึกษาระบบ IT และ Cloud',
|
||||
description: 'บริการให้คำปรึกษาระบบ IT และ Cloud สำหรับธุรกิจ SMEs เลือกเครื่องมือที่เหมาะกับงบประมาณ',
|
||||
url: 'https://moreminimore.com/services/tech-consult',
|
||||
siteName: 'MoreminiMore',
|
||||
locale: 'th_TH',
|
||||
type: 'website',
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: 'บริการ Tech Consult | MoreminiMore - คำปรึกษาระบบ IT และ Cloud',
|
||||
description: 'บริการให้คำปรึกษาระบบ IT และ Cloud สำหรับธุรกิจ SMEs เลือกเครื่องมือที่เหมาะกับงบประมาณ',
|
||||
},
|
||||
alternates: {
|
||||
canonical: 'https://moreminimore.com/services/tech-consult',
|
||||
},
|
||||
}
|
||||
|
||||
export default function TechConsultLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return children
|
||||
}
|
||||
600
src/app/(frontend)/services/tech-consult/page.tsx
Normal file
600
src/app/(frontend)/services/tech-consult/page.tsx
Normal file
@@ -0,0 +1,600 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect } from 'react'
|
||||
|
||||
export default function TechConsultPage() {
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible')
|
||||
}
|
||||
})
|
||||
},
|
||||
{ threshold: 0.1, rootMargin: '0px 0px -50px 0px' }
|
||||
)
|
||||
|
||||
document.querySelectorAll('.reveal, .reveal-left, .reveal-right').forEach((el) => {
|
||||
observer.observe(el)
|
||||
})
|
||||
|
||||
return () => observer.disconnect()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Schema.org Structured Data */}
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "LocalBusiness",
|
||||
"name": "MoreminiMore Co.,Ltd.",
|
||||
"description": "บริการที่ปรึกษา AI ครบวงจร สำหรับธุรกิจไทย",
|
||||
"telephone": "+668****5945",
|
||||
"email": "contact@moreminimore.com",
|
||||
"url": "https://www.moreminimore.com/services/tech-consult",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "53 หมู่ 1 ต.บ้านแพ้ว",
|
||||
"addressLocality": "บ้านแพ้ว",
|
||||
"addressRegion": "สมุทรสาคร",
|
||||
"postalCode": "74120",
|
||||
"addressCountry": "TH"
|
||||
},
|
||||
"geo": {
|
||||
"@type": "GeoCoordinates",
|
||||
"latitude": 13.5497,
|
||||
"longitude": 100.4167
|
||||
},
|
||||
"openingHours": "Mo-Fr 09:00-18:00",
|
||||
"priceRange": "$$",
|
||||
"serviceType": ["Tech Consult", "AI Consulting", "Marketing Automation", "AI Hardware"]
|
||||
})
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* FAQPage Schema */}
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
"mainEntity": [
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Tech Consult ต่างจากการซื้อ Software ทั่วไปอย่างไร?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "เราให้คำปรึกษาแบบแนวทางการแก้ปัญหา ไม่ใช่แค่ขาย Software เราจะวิเคราะห์ธุรกิจของคุณก่อน จากนั้นจึงแนะนำ Solution ที่เหมาะสม ทั้ง Free Tools, Paid Software หรือ Custom Development"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "AI Hardware Consulting ช่วยอะไรได้บ้าง?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "เราช่วยแนะนำสเปค Server/GPU ที่เหมาะสมกับการใช้งาน AI ของคุณ, ช่วยเปรียบเทียบราคาและทางเลือก, ติดตั้งระบบ On-premise และดูแลและบำรุงรักษา ช่วยประหยัดค่าใช้จ่ายที่ไม่จำเป็น"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "ต้องมีความรู้ด้านเทคนิคไหม?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "ไม่ต้องมีความรู้ด้านเทคนิคเลย! เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ให้ข้อมูลธุรกิจและดูผลลัพธ์ เราจะอธิบายให้เข้าใจง่าย ไม่ใช้ศัพท์เทคนิคมากเกินไป"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "ค่าใช้จ่ายในการปรึกษาเป็นอย่างไร?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "เราให้คำปรึกษาเบื้องต้นฟรี! สำหรับการปรึกษาเชิงลึกและ Implementation จะคิดตามความซับซ้อนของโปรเจกต์ เราจะแจ้งราคาก่อนเริ่มงานเสมอ ไม่มีค่าใช้จ่ายที่ซ่อนไว้"
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Hero Section - Blue/Teal Theme */}
|
||||
<section id="hero" class="relative overflow-hidden min-h-[50vh] flex items-center">
|
||||
{/* Animated Background - Blue/Teal */}
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-teal-400 via-teal-500 to-blue-600">
|
||||
{/* Floating Shapes */}
|
||||
<div class="absolute top-20 left-10 w-72 h-72 bg-white/20 rounded-full blur-3xl animate-float-1"></div>
|
||||
<div class="absolute bottom-20 right-10 w-96 h-96 bg-teal-300/20 rounded-full blur-3xl animate-float-2"></div>
|
||||
<div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/10 rounded-full blur-2xl animate-float-3"></div>
|
||||
<div class="absolute bottom-1/3 right-1/4 w-64 h-64 bg-blue-200/20 rounded-full blur-2xl animate-float-1" style={{ animationDelay: '0.75s' }}></div>
|
||||
</div>
|
||||
|
||||
{/* Floating dots */}
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div class="absolute top-1/4 left-[10%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-1"></div>
|
||||
<div class="absolute top-1/3 left-[80%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2"></div>
|
||||
<div class="absolute top-2/3 left-[20%] w-4 h-4 bg-white/20 rounded-full animate-float-dot-3"></div>
|
||||
<div class="absolute bottom-1/4 left-[70%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-1" style={{ animationDelay: '1s' }}></div>
|
||||
<div class="absolute top-1/2 left-[40%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2" style={{ animationDelay: '0.5s' }}></div>
|
||||
<div class="absolute bottom-1/3 left-[85%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-3" style={{ animationDelay: '1.5s' }}></div>
|
||||
</div>
|
||||
|
||||
{/* Grid Pattern */}
|
||||
<div class="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: 'linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px)', backgroundSize: '50px 50px' }}></div>
|
||||
|
||||
<div class="container mx-auto px-4 relative z-10 py-16">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center max-w-6xl mx-auto">
|
||||
{/* Left: Text Content */}
|
||||
<div class="text-center lg:text-left">
|
||||
{/* Badge */}
|
||||
<div class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full mb-6 animate-fade-in">
|
||||
<span class="w-2 h-2 bg-teal-300 rounded-full animate-pulse"></span>
|
||||
<span class="text-sm font-medium text-white/90">บริการที่ปรึกษา AI ครบวงจร</span>
|
||||
</div>
|
||||
|
||||
{/* Main Headline */}
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight animate-fade-in-up" style={{ animationDelay: '0.1s' }}>
|
||||
ที่ปรึกษา AI<br/>
|
||||
<span class="text-white">ครบวงจร</span><br/>
|
||||
สำหรับธุรกิจไทย
|
||||
</h1>
|
||||
|
||||
{/* Subheadline */}
|
||||
<p class="text-lg md:text-xl text-white/80 mb-10 max-w-2xl mx-auto lg:mx-0 leading-relaxed animate-fade-in-up" style={{ animationDelay: '0.2s' }}>
|
||||
ที่ปรึกษาด้าน Marketing Automation, AI Automation<br/>
|
||||
และ AI Hardware สำหรับธุรกิจของคุณ
|
||||
</p>
|
||||
|
||||
{/* CTAs */}
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start items-center animate-fade-in-up" style={{ animationDelay: '0.3s' }}>
|
||||
<a href="tel:0809955945" class="group bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl flex items-center gap-3">
|
||||
<svg class="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
|
||||
</svg>
|
||||
โทรหาเรา
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="group bg-black/20 backdrop-blur-sm text-white border-2 border-white/30 px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-black transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl flex items-center gap-3">
|
||||
<img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5 group-hover:animate-bounce" />
|
||||
สอบถามราคา
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Trust Badges */}
|
||||
<div class="mt-10 pt-6 border-t border-white/20 animate-fade-in-up" style={{ animationDelay: '0.4s' }}>
|
||||
<div class="flex flex-wrap justify-center lg:justify-start gap-6 text-white/80 text-sm">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-teal-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
ปรึกษาฟรี
|
||||
</span>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-teal-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
ทีมงานมืออาชีพ
|
||||
</span>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-teal-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
ราคาเหมาะสม
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Hero Image */}
|
||||
<div class="reveal scale">
|
||||
<img
|
||||
src="/images/hero/tech-consult-hero.jpg"
|
||||
alt="ที่ปรึกษา AI สำหรับธุรกิจไทย - บริการให้คำปรึกษาด้าน Marketing Automation, AI Automation และ AI Hardware"
|
||||
class="w-full h-auto rounded-2xl shadow-2xl"
|
||||
loading="eager"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Services Section */}
|
||||
<section class="reveal py-20 bg-gradient-to-b from-gray-50 to-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
บริการของเรา
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
|
||||
บริการที่ปรึกษา AI ครบวงจรสำหรับธุรกิจของคุณ
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{/* Marketing Automation */}
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"></path>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">Marketing Automation</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• ระบบการตลาดอัตโนมัติ</li>
|
||||
<li>• Email Marketing อัตโนมัติ</li>
|
||||
<li>• Chatbot ตอบคำถาม</li>
|
||||
<li>• วิเคราะห์ข้อมูลลูกค้า</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* AI Automation */}
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">AI Automation</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• ระบบ AI ตอบคำถาม</li>
|
||||
<li>• ประมวลผลเอกสาร</li>
|
||||
<li>• วิเคราะห์ข้อมูลอัตโนมัติ</li>
|
||||
<li>• สร้างเนื้อหาด้วย AI</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* AI Hardware Consulting */}
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">AI Hardware</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• ที่ปรึกษาซื้อ AI Server</li>
|
||||
<li>• แนะนำ GPU/สเปค</li>
|
||||
<li>• ติดตั้งระบบ On-premise</li>
|
||||
<li>• ดูแลและบำรุงรักษา</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* รวมระบบ */}
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">รวมระบบ</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• รวมระบบที่มีอยู่</li>
|
||||
<li>• เชื่อมต่อ API</li>
|
||||
<li>• สร้าง Workflow</li>
|
||||
<li>• ฝึกอบรมพนักงาน</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Why Choose Us */}
|
||||
<section class="reveal py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
ทำไมต้องเลือกเรา?
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
|
||||
เรามีความเชี่ยวชาญในการให้คำปรึกษา AI ให้ธุรกิจของคุณ
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
{/* Benefit 1: ครบวงจร */}
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">ครบวงจร</h3>
|
||||
<p class="text-gray-600">
|
||||
ให้คำปรึกษาครบทุกด้าน ทั้ง Marketing Automation, AI Automation และ Hardware คุณไม่ต้องไปหาหลายที่
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Benefit 2: ประหยัด */}
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">ประหยัด</h3>
|
||||
<p class="text-gray-600">
|
||||
ปรึกษาฟรีในเบื้องต้น แนะนำแนวทางที่เหมาะสมกับงบประมาณของคุณ ไม่ต้องซื้อของที่ไม่จำเป็น
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Benefit 3: ทำงานด้วยกัน */}
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">ทำงานด้วยกัน</h3>
|
||||
<p class="text-gray-600">
|
||||
เราทำงานร่วมกับคุณตลอดกระบวนการ ตั้งแต่วางแผน จนถึง implementation และดูแลต่อเนื่อง
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
<section class="reveal py-20 bg-gray-50">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
ตัวอย่างการใช้งาน
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
ตัวอย่างการให้คำปรึกษา AI ให้ธุรกิจต่าง ๆ
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">ร้านค้าออนไลน์</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">ให้คำปรึกษา Marketing Automation + AI Chatbot สำหรับตอบคำถามลูกค้าและแนะนำสินค้า</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">คลินิก/สถานพยาบาล</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">ที่ปรึกษา AI ระบบนัดหมายอัตโนมัติ + วิเคราะห์ข้อมูลผู้ป่วย + AI ตอบคำถามเบื้องต้น</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">ร้านอาหาร</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">ให้คำปรึกษา AI Order System + Marketing Automation ส่งโปรโมชันตรงกลุ่มลูกค้า</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 14l9-5-9-5-9 5 9 5z"></path><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path></svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">โรงเรียน/สถาบันการศึกษา</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">ที่ปรึกษา AI ระบบรับสมัครอัตโนมัติ + Chatbot ตอบคำถามผู้ปกครอง + วิเคราะห์ข้อมูล</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">อสังหาริมทรัพย์</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">ให้คำปรึกษา AI Lead Scoring + Marketing Automation ติดตามลูกค้า + Chatbot สนทนา</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">โรงงาน/Manufacturing</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">ที่ปรึกษา AI Hardware สำหรับ Machine Learning + ระบบ Predictive Maintenance</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">Startup/SaaS</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">ให้คำปรึกษา AI Integration + Marketing Automation + รวมระบบ API ต่าง ๆ</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">บริษัท/องค์กร</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">ที่ปรึกษา AI ภายในองค์กร + ระบบ Document Processing + AI Hardware Consulting</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">ธุรกิจรถยนต์</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">ให้คำปรึกษา AI สำหรับการตลาด + Chatbot สอบถามข้อมูล + AI Hardware สำหรับวิเคราะห์ข้อมูล</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">ห้างสรรพสินค้า/ค้าปลีก</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">ที่ปรึกษา AI Analytics + Marketing Automation + ระบบแนะนำสินค้า personalize</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Process */}
|
||||
<section class="reveal py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
ขั้นตอนการทำงาน
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
กระบวนการให้คำปรึกษาที่ชัดเจน
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-4 gap-4">
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">1</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">วิเคราะห์</h3>
|
||||
<p class="text-sm text-gray-600">วิเคราะห์ธุรกิจและความต้องการ</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">2</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">วางแผน</h3>
|
||||
<p class="text-sm text-gray-600">เสนอแนวทางและ Solution</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">3</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">ดำเนินการ</h3>
|
||||
<p class="text-sm text-gray-600">Implementation ระบบที่เหมาะสม</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">4</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">ดูแลต่อเนื่อง</h3>
|
||||
<p class="text-sm text-gray-600">Support และปรับปรุงต่อไป</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ */}
|
||||
<section class="reveal py-20 bg-gray-50">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
คำถามที่พบบ่อย
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
คำถามที่ลูกค้ามักถามเกี่ยวกับบริการที่ปรึกษา
|
||||
</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">Tech Consult ต่างจากการซื้อ Software ทั่วไปอย่างไร?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shapeRendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p>เราให้คำปรึกษาแบบ <strong>แนวทางการแก้ปัญหา</strong> ไม่ใช่แค่ขาย Software เราจะวิเคราะห์ธุรกิจของคุณก่อน จากนั้นจึงแนะนำ Solution ที่เหมาะสม ทั้ง Free Tools, Paid Software หรือ Custom Development</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">AI Hardware Consulting ช่วยอะไรได้บ้าง?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shapeRendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p>เราช่วยแนะนำ<strong>สเปค Server/GPU</strong> ที่เหมาะสมกับการใช้งาน AI ของคุณ, ช่วยเปรียบเทียบราคาและทางเลือก, ติดตั้งระบบ On-premise และดูแลและบำรุงรักษา ช่วยประหยัดค่าใช้จ่ายที่ไม่จำเป็น</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">ต้องมีความรู้ด้านเทคนิคไหม?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shapeRendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p><strong>ไม่ต้องมีความรู้ด้านเทคนิคเลย!</strong> เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ให้ข้อมูลธุรกิจและดูผลลัพธ์ เราจะอธิบายให้เข้าใจง่าย ไม่ใช้ศัพท์เทคนิคมากเกินไป</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">ค่าใช้จ่ายในการปรึกษาเป็นอย่างไร?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shapeRendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p>เราให้คำปรึกษาเบื้องต้น<strong>ฟรี!</strong> สำหรับการปรึกษาเชิงลึกและ Implementation จะคิดตามความซับซ้อนของโปรเจกต์ เราจะแจ้งราคาก่อนเริ่มงานเสมอ ไม่มีค่าใช้จ่ายที่ซ่อนไว้</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Related Services */}
|
||||
<section class="reveal py-12 bg-white border-t border-gray-100">
|
||||
<div class="container mx-auto px-4 max-w-4xl text-center">
|
||||
<h3 class="text-lg font-bold mb-6 text-gray-900">บริการที่เกี่ยวข้อง</h3>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="/services/marketing-automation" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
|
||||
Marketing Automation
|
||||
</a>
|
||||
<a href="/services/ai-automation" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg>
|
||||
AI Automation
|
||||
</a>
|
||||
<a href="/services/web-development" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
|
||||
พัฒนาเว็บไซต์
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section - Yellow */}
|
||||
<section id="cta" class="reveal py-20 bg-[#fed400]">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-black">
|
||||
พร้อมเริ่มต้นใช้ AI ในธุรกิจแล้วหรือยัง?
|
||||
</h2>
|
||||
<p class="text-xl mb-8 max-w-2xl mx-auto text-gray-800">
|
||||
ติดต่อเราเพื่อปรึกษาฟรี! เราพร้อมช่วยคุณหา Solution ที่เหมาะสมกับธุรกิจ
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="tel:0809955945" class="group bg-black text-[#fed400] px-8 py-4 rounded-full font-bold text-lg hover:bg-black/80 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl inline-flex items-center justify-center gap-3">
|
||||
<svg class="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
|
||||
</svg>
|
||||
080-995-5945
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="group bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl inline-flex items-center justify-center gap-3">
|
||||
<img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5 group-hover:animate-bounce" />
|
||||
สอบถามราคา
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export function generateStaticParams() {
|
||||
return [
|
||||
{ slug: 'tech-consult' }
|
||||
]
|
||||
}
|
||||
31
src/app/(frontend)/services/web-development/layout.tsx
Normal file
31
src/app/(frontend)/services/web-development/layout.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'บริการรับทำเว็บไซต์ AI-Enhanced | MoreminiMore + GEO ติด ChatGPT',
|
||||
description: 'รับทำเว็บไซต์ AI Chatbot พร้อม GEO ติด ChatGPT, Perplexity, Google AI Overviews ครบวงจร',
|
||||
keywords: 'รับทำเว็บไซต์, AI Chatbot, GEO, ChatGPT, SEO, Next.js, พัฒนาเว็บไซต์',
|
||||
openGraph: {
|
||||
title: 'บริการรับทำเว็บไซต์ AI-Enhanced | MoreminiMore + GEO ติด ChatGPT',
|
||||
description: 'รับทำเว็บไซต์ AI Chatbot พร้อม GEO ติด ChatGPT, Perplexity, Google AI Overviews ครบวงจร',
|
||||
url: 'https://moreminimore.com/services/web-development',
|
||||
siteName: 'MoreminiMore',
|
||||
locale: 'th_TH',
|
||||
type: 'website',
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: 'บริการรับทำเว็บไซต์ AI-Enhanced | MoreminiMore + GEO ติด ChatGPT',
|
||||
description: 'รับทำเว็บไซต์ AI Chatbot พร้อม GEO ติด ChatGPT, Perplexity, Google AI Overviews ครบวงจร',
|
||||
},
|
||||
alternates: {
|
||||
canonical: 'https://moreminimore.com/services/web-development',
|
||||
},
|
||||
}
|
||||
|
||||
export default function WebDevelopmentLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return children
|
||||
}
|
||||
604
src/app/(frontend)/services/web-development/page.tsx
Normal file
604
src/app/(frontend)/services/web-development/page.tsx
Normal file
@@ -0,0 +1,604 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect } from 'react'
|
||||
|
||||
export default function WebDevelopmentPage() {
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible')
|
||||
}
|
||||
})
|
||||
},
|
||||
{ threshold: 0.1, rootMargin: '0px 0px -50px 0px' }
|
||||
)
|
||||
|
||||
document.querySelectorAll('.reveal, .reveal-left, .reveal-right').forEach((el) => {
|
||||
observer.observe(el)
|
||||
})
|
||||
|
||||
return () => observer.disconnect()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Schema.org Structured Data */}
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "LocalBusiness",
|
||||
"name": "MoreminiMore Co.,Ltd.",
|
||||
"description": "บริการรับทำเว็บไซต์สำหรับ SME ไทย",
|
||||
"telephone": "+668****5945",
|
||||
"email": "contact@moreminimore.com",
|
||||
"url": "https://www.moreminimore.com/services/web-development",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "53 หมู่ 1 ต.บ้านแพ้ว",
|
||||
"addressLocality": "บ้านแพ้ว",
|
||||
"addressRegion": "สมุทรสาคร",
|
||||
"postalCode": "74120",
|
||||
"addressCountry": "TH"
|
||||
},
|
||||
"geo": {
|
||||
"@type": "GeoCoordinates",
|
||||
"latitude": 13.5497,
|
||||
"longitude": 100.4167
|
||||
},
|
||||
"openingHours": "Mo-Fr 09:00-18:00",
|
||||
"priceRange": "$$",
|
||||
"serviceType": ["Web Development", "AI Integration", "SEO Optimization", "GEO Optimization", "Server Hosting"]
|
||||
})
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* GEO FAQ Schema */}
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
"mainEntity": [
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "แก้ไขเว็บเองยากไหม?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "ไม่ยากเลย สำหรับ Astro การแก้ไขเนื้อหาจะเน้นการคุยกับ AI ให้ช่วยสร้างและปรับแต่งเนื้อหา ส่วน WordPress มาพร้อมระบบหลังบ้านที่มีหน้าตาการใช้งานง่าย คุณสามารถเปลี่ยนข้อความ รูปภาพ สินค้า ได้ด้วยตัวเองโดยไม่ต้องมีความรู้ทางเทคนิค"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "มีค่าใช้จ่ายอะไรเพิ่มเติมไหม?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "ค่าบริการ Server และโดเมนจะฟรีในปีแรก และจะมีค่าใช้จ่ายในปีถัดไป ค่าบริการ Server จะขึ้นอยู่กับความซับซ้อนของเว็บไซต์และจำนวนผู้เข้าชม หากเว็บไซต์มีผู้เข้าชมเกิน 100,000 คนต่อเดือน ค่าบริการ Server จะปรับเพิ่มขึ้น"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Server ดูแลให้ไหม?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "เราดูแลเรื่อง Server ให้ครบวงจร รวมถึงการปรับจูนระบบให้มีประสิทธิภาพสูงสุด ลูกค้าจะจ่ายค่า Server เพิ่มเฉพาะกรณีที่มีผู้เข้าเว็บใช้งานสูงมาก ระดับ 100,000 คนต่อเดือนขึ้นไป หรือต้องการติดตั้งแอปพิเศษเพิ่มเติม"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "ทำเว็บขายของ (E-commerce) ได้ไหม?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "ทำได้แน่นอน เราใช้ WordPress เป็นพื้นฐานในการพัฒนาเว็บไซต์ E-commerce พร้อมระบบตะกร้าสินค้า ชำระเงิน ติดตามสินค้า และระบบหลังบ้านจัดการสินค้าครบวงจร"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "ต้องมีความรู้ทางเทคนิคไหม?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "ไม่จำเป็นเลย เราดูแลทุกอย่างตั้งแต่ต้นจนจบ ตั้งแต่การออกแบบ พัฒนา ไปจนถึงการติดตั้งและส่งมอบ พร้อมทั้งอบรมการใช้งานให้ทีมของคุณสามารถใช้งานระบบได้อย่างมั่นใจ"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "GEO คืออะไร?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "GEO (Generative Engine Optimization) คือการปรับแต่งเนื้อหาและโครงสร้างเว็บไซต์ให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews ทำให้ธุรกิจของคุณปรากฏในคำตอบของ AI นอกจากจะติด Google ปกติแล้ว ยังติด AI Search อีกด้วย"
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Hero Section - Orange Theme */}
|
||||
<section id="hero" class="relative overflow-hidden min-h-[50vh] flex items-center">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-orange-300 via-orange-400 to-orange-500">
|
||||
<div class="absolute top-20 left-10 w-72 h-72 bg-white/20 rounded-full blur-3xl animate-float-1"></div>
|
||||
<div class="absolute bottom-20 right-10 w-96 h-96 bg-orange-200/20 rounded-full blur-3xl animate-float-2"></div>
|
||||
<div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/10 rounded-full blur-2xl animate-float-3"></div>
|
||||
<div class="absolute bottom-1/3 right-1/4 w-64 h-64 bg-orange-100/20 rounded-full blur-2xl animate-float-1" style={{ animationDelay: '0.75s' }}></div>
|
||||
</div>
|
||||
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div class="absolute top-1/4 left-[10%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-1"></div>
|
||||
<div class="absolute top-1/3 left-[80%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2"></div>
|
||||
<div class="absolute top-2/3 left-[20%] w-4 h-4 bg-white/20 rounded-full animate-float-dot-3"></div>
|
||||
<div class="absolute bottom-1/4 left-[70%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-1" style={{ animationDelay: '1s' }}></div>
|
||||
<div class="absolute top-1/2 left-[40%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2" style={{ animationDelay: '0.5s' }}></div>
|
||||
<div class="absolute bottom-1/3 left-[85%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-3" style={{ animationDelay: '1.5s' }}></div>
|
||||
</div>
|
||||
|
||||
<div class="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: 'linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px)', backgroundSize: '50px 50px' }}></div>
|
||||
|
||||
<div class="container mx-auto px-4 relative z-10 py-16">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<div class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full mb-6 animate-fade-in">
|
||||
<span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
|
||||
<span class="text-sm font-medium text-white/90">บริการรับทำเว็บไซต์สำหรับ SME ไทย</span>
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight animate-fade-in-up" style={{ animationDelay: '0.1s' }}>
|
||||
สร้างเว็บไซต์<br/>
|
||||
<span class="text-white">เปลี่ยนแปลงเองได้</span><br/>
|
||||
ด้วย AI
|
||||
</h1>
|
||||
|
||||
<p class="text-lg md:text-xl text-white mb-10 max-w-2xl mx-auto leading-relaxed animate-fade-in-up" style={{ animationDelay: '0.2s' }}>
|
||||
เว็บไซต์ที่คุณแก้ไขเองได้ง่าย ๆ ไม่ต้องรอเราทุกครั้ง<br/>
|
||||
พร้อม AI ช่วยสร้างเนื้อหาใหม่ ๆ ให้ทันที<br/>
|
||||
<span class="text-purple-100 font-medium">+ GEO ติด ChatGPT, Perplexity, AI Search</span>
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center animate-fade-in-up" style={{ animationDelay: '0.3s' }}>
|
||||
<a href="tel:0809955945" class="group bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl flex items-center gap-3">
|
||||
<svg class="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
|
||||
</svg>
|
||||
โทรหาเรา
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="group bg-black/20 backdrop-blur-sm text-white border-2 border-white/30 px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-black transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl flex items-center gap-3">
|
||||
<img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5 group-hover:animate-bounce" />
|
||||
สอบถามราคา
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 pt-6 border-t border-white/20 animate-fade-in-up" style={{ animationDelay: '0.4s' }}>
|
||||
<div class="flex flex-wrap justify-center gap-6 text-white/80 text-sm">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-green-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
ปรึกษาฟรี
|
||||
</span>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-green-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
ดูแลหลังขาย
|
||||
</span>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-green-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
ราคาเหมาะสม
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Why Choose Us */}
|
||||
<section class="reveal py-20 bg-gradient-to-b from-gray-50 to-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
ทำไมต้องเลือกเรา?
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
|
||||
เราสร้างเว็บไซต์ให้คุณสามารถจัดการเองได้ ไม่ต้องพึ่งเราทุกครั้ง
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-yellow-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">แก้ไขเองได้ง่าย</h3>
|
||||
<p class="text-gray-600">
|
||||
ระบบหลังบ้านใช้งานง่าย เปลี่ยนข้อความ รูปภาพ สินค้า ได้ด้วยตัวเอง ไม่ต้องมีความรู้เทคนิค
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-yellow-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">AI ช่วยสร้างเนื้อหา</h3>
|
||||
<p class="text-gray-600">
|
||||
สั่ง AI ให้เขียนบทความ แก้ไขเนื้อหา เพิ่มสินค้าใหม่ ได้ทันที ไม่ต้องรอคนช่วย
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border-2 border-purple-200">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">GEO ติด AI Search</h3>
|
||||
<p class="text-gray-600">
|
||||
เว็บไซต์ถูกอ้างอิงโดย ChatGPT, Perplexity, Google AI Overviews นอกจากติด Google ยังติด AI ด้วย
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-yellow-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">Server คุณภาพสูง</h3>
|
||||
<p class="text-gray-600">
|
||||
เราดูแล Server ให้ เว็บไซต์โหลดเร็ว ปลอดภัย มีปัญหาน้อย ส่งผลดีต่อ SEO
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* What's Included */}
|
||||
<section class="reveal py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
สิ่งที่ได้รับ
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
|
||||
ทุกเว็บไซต์มาพร้อมให้ครบ ไม่ต้องจ่ายเพิ่ม
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="bg-gray-50 rounded-xl p-6 text-center">
|
||||
<div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900 mb-1">เว็บไซต์</h3>
|
||||
<p class="text-sm text-gray-600">พร้อมใช้งาน</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-xl p-6 text-center">
|
||||
<div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900 mb-1">SSL ฟรี</h3>
|
||||
<p class="text-sm text-gray-600">ปลอดภัยทุกการเข้าชม</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-xl p-6 text-center">
|
||||
<div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900 mb-1">โดเมน</h3>
|
||||
<p class="text-sm text-gray-600">จดให้ได้เลย</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-xl p-6 text-center">
|
||||
<div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900 mb-1">Analytics</h3>
|
||||
<p class="text-sm text-gray-600">ติดตามผู้เข้าชม</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Services */}
|
||||
<section class="reveal py-20 bg-gray-50">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
บริการของเรา
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
|
||||
พัฒนาเว็บไซต์ครบวงจรตามความต้องการ
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-yellow-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">Landing Page</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• ราคาเริ่มต้น 10,000 บาท</li>
|
||||
<li>• ดีไซน์ตามสั่ง</li>
|
||||
<li>• รองรับ Mobile</li>
|
||||
<li>• SEO พื้นฐาน</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-yellow-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">Corporate Website</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• เว็บแนะนำบริษัท</li>
|
||||
<li>• ระบบหลังบ้าน</li>
|
||||
<li>• อัปเดตเนื้อหาได้</li>
|
||||
<li>• รองรับ AI Content</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-yellow-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">E-commerce</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• ตะกร้าสินค้า</li>
|
||||
<li>• ชำระเงิน</li>
|
||||
<li>• ติดตามสินค้า</li>
|
||||
<li>• ระบบหลังบ้าน</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border-2 border-purple-200">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">AI Chatbot</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• ตอบคำถามลูกค้า 24/7</li>
|
||||
<li>• เชื่อมต่อกับเว็บไซต์</li>
|
||||
<li>• AI อัจฉริยะ</li>
|
||||
<li>• วิเคราะห์ข้อมูล</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Target Audience */}
|
||||
<section class="reveal py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
เหมาะกับใคร?
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
บริการของเราเหมาะสำหรับธุรกิจหลากหลายประเภท
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-2xl p-6 text-center border border-orange-200">
|
||||
<div class="w-16 h-16 bg-orange-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-2">SME / ธุรกิจขนาดเล็ก</h3>
|
||||
<p class="text-sm text-gray-600">ธุรกิจท้องถิ่น ร้านค้าปลีก บริการต่าง ๆ ที่ต้องการเว็บไซต์ในราคาที่เข้าถึงได้</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-br from-green-50 to-green-100 rounded-2xl p-6 text-center border border-green-200">
|
||||
<div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-2">ร้านค้าออนไลน์</h3>
|
||||
<p class="text-sm text-gray-600">ธุรกิจ E-commerce ที่ต้องการขายสินค้าออนไลน์ พร้อมระบบตะกร้าและชำระเงินครบวงจร</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl p-6 text-center border border-blue-200">
|
||||
<div class="w-16 h-16 bg-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-2">บริษัท / องค์กร</h3>
|
||||
<p class="text-sm text-gray-600">บริษัทที่ต้องการเว็บไซต์องค์กร เว็บไซต์แนะนำบริษัท หรือเว็บไซต์ในระบบ Intranet</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* GEO Section */}
|
||||
<section class="reveal py-20 bg-gradient-to-r from-purple-500 to-indigo-600">
|
||||
<div class="container mx-auto px-4 max-w-5xl">
|
||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h2 class="text-2xl md:text-3xl font-bold mb-4 text-white">
|
||||
GEO ติด AI Search - เว็บถูกอ้างอิงโดย ChatGPT, Perplexity, Google AI Overviews
|
||||
</h2>
|
||||
<p class="text-white/80 mb-6 leading-relaxed">
|
||||
GEO (Generative Engine Optimization) คือการปรับแต่งเนื้อหาและโครงสร้างเว็บไซต์ให้ถูกอ้างอิงโดย AI Search Engine
|
||||
ทำให้ธุรกิจของคุณปรากฏในคำตอบของ AI นอกจากจะติด Google ปกติแล้ว ยังติด AI Search อีกด้วย
|
||||
</p>
|
||||
<ul class="space-y-3 text-white/90">
|
||||
<li class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-purple-300 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
Schema markup ครบ
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-purple-300 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
เนื้อหาคุณภาพสูง
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-purple-300 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
ติดทั้ง Google และ AI Search
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="/images/illustrations/geo-ai-search.jpg"
|
||||
alt="GEO ติด AI Search - ChatGPT, Perplexity, Google AI Overviews"
|
||||
class="w-full h-auto rounded-2xl shadow-xl"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ */}
|
||||
<section class="reveal py-20 bg-gray-50">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
คำถามที่พบบ่อย
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
คำถามที่ลูกค้ามักถามเกี่ยวกับบริการพัฒนาเว็บไซต์
|
||||
</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">แก้ไขเว็บเองยากไหม?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shapeRendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p>ไม่ยากเลย สำหรับ Astro การแก้ไขเนื้อหาจะเน้นการคุยกับ AI ให้ช่วยสร้างและปรับแต่งเนื้อหา ส่วน WordPress มาพร้อมระบบหลังบ้านที่มีหน้าตาการใช้งานง่าย คุณสามารถเปลี่ยนข้อความ รูปภาพ สินค้า ได้ด้วยตัวเองโดยไม่ต้องมีความรู้ทางเทคนิค</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">มีค่าใช้จ่ายอะไรเพิ่มเติมไหม?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shapeRendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p>ค่าบริการ Server และโดเมนจะฟรีในปีแรก และจะมีค่าใช้จ่ายในปีถัดไป ค่าบริการ Server จะขึ้นอยู่กับความซับซ้อนของเว็บไซต์และจำนวนผู้เข้าชม หากเว็บไซต์มีผู้เข้าชมเกิน 100,000 คนต่อเดือน ค่าบริการ Server จะปรับเพิ่มขึ้น</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">Server ดูแลให้ไหม?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shapeRendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p>เราดูแลเรื่อง Server ให้ครบวงจร รวมถึงการปรับจูนระบบให้มีประสิทธิภาพสูงสุด ลูกค้าจะจ่ายค่า Server เพิ่มเฉพาะกรณีที่มีผู้เข้าเว็บใช้งานสูงมาก ระดับ 100,000 คนต่อเดือนขึ้นไป หรือต้องการติดตั้งแอปพิเศษเพิ่มเติม</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">ทำเว็บขายของ (E-commerce) ได้ไหม?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shapeRendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p>ทำได้แน่นอน เราใช้ WordPress เป็นพื้นฐานในการพัฒนาเว็บไซต์ E-commerce พร้อมระบบตะกร้าสินค้า ชำระเงิน ติดตามสินค้า และระบบหลังบ้านจัดการสินค้าครบวงจร</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden border-2 border-purple-100">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">GEO คืออะไร? ต่างจาก SEO อย่างไร?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shapeRendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p><strong>GEO (Generative Engine Optimization)</strong> คือการปรับแต่งเนื้อหาให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews<br/>
|
||||
<strong>SEO</strong> ทำให้ติด Google ปกติ<br/>
|
||||
<strong>GEO</strong> ทำให้ปรากฏในคำตอบของ AI<br/>
|
||||
เราทำทั้งสองอย่างคู่กัน — เนื้อหาที่เขียนดีด้วย AI จะได้ทั้ง Google และ AI Search</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Related Services */}
|
||||
<section class="reveal py-12 bg-white border-t border-gray-100">
|
||||
<div class="container mx-auto px-4 max-w-4xl text-center">
|
||||
<h3 class="text-lg font-bold mb-6 text-gray-900">บริการที่เกี่ยวข้อง</h3>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="/services/marketing-automation" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md inline-flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
||||
</svg>
|
||||
Marketing Automation
|
||||
</a>
|
||||
<a href="/services/ai-automation" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md inline-flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
|
||||
</svg>
|
||||
AI Automation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section - Yellow */}
|
||||
<section id="cta" class="reveal py-20 bg-[#fed400]">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-black">
|
||||
พร้อมสร้างเว็บไซต์แล้วหรือยัง?
|
||||
</h2>
|
||||
<p class="text-xl mb-8 max-w-2xl mx-auto text-gray-800">
|
||||
ติดต่อเราเพื่อปรึกษาฟรี! เราพร้อมช่วยคุณสร้างเว็บไซต์ที่ตอบโจทย์
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="tel:0809955945" class="group bg-black text-[#fed400] px-8 py-4 rounded-full font-bold text-lg hover:bg-black/80 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl inline-flex items-center justify-center gap-3">
|
||||
<svg class="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
|
||||
</svg>
|
||||
080-995-5945
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="group bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl inline-flex items-center justify-center gap-3">
|
||||
<img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5 group-hover:animate-bounce" />
|
||||
สอบถามราคา
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export function generateStaticParams() {
|
||||
return [
|
||||
{ slug: 'web-development' }
|
||||
]
|
||||
}
|
||||
323
src/app/(frontend)/terms-of-service/page.tsx
Normal file
323
src/app/(frontend)/terms-of-service/page.tsx
Normal file
@@ -0,0 +1,323 @@
|
||||
import type { Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'ข้อกำหนดการใช้บริการ | MoreminiMore',
|
||||
description: 'ข้อกำหนดและเงื่อนไขการใช้บริการของบริษัท มอร์มินิมอร์ จำกัด',
|
||||
keywords: 'ข้อกำหนด, เงื่อนไข, การใช้บริการ, MoreminiMore',
|
||||
openGraph: {
|
||||
title: 'ข้อกำหนดการใช้บริการ | MoreminiMore',
|
||||
description: 'ข้อกำหนดและเงื่อนไขการใช้บริการของบริษัท มอร์มินิมอร์ จำกัด',
|
||||
url: 'https://moreminimore.com/terms-of-service',
|
||||
siteName: 'MoreminiMore',
|
||||
locale: 'th_TH',
|
||||
type: 'website',
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: 'ข้อกำหนดการใช้บริการ | MoreminiMore',
|
||||
description: 'ข้อกำหนดและเงื่อนไขการใช้บริการของบริษัท มอร์มินิมอร์ จำกัด',
|
||||
},
|
||||
alternates: {
|
||||
canonical: 'https://moreminimore.com/terms-of-service',
|
||||
},
|
||||
}
|
||||
|
||||
export default function TermsOfServicePage() {
|
||||
return (
|
||||
<main className="flex-grow">
|
||||
{/* Hero Section */}
|
||||
<section className="py-20 bg-gradient-to-br from-yellow-50 to-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-center mb-12 text-gray-900">
|
||||
ข้อกำหนดและเงื่อนไข
|
||||
</h1>
|
||||
|
||||
<div className="max-w-4xl mx-auto bg-white rounded-lg shadow-md p-8">
|
||||
{/* Document Info */}
|
||||
<div className="bg-yellow-50 rounded-lg p-6 mb-8 border border-yellow-200">
|
||||
<p className="text-gray-700 text-base">
|
||||
<strong>ชื่อเว็บไซต์:</strong> MoreminiMore<br />
|
||||
<strong>เว็บไซต์:</strong> moreminimore.com<br />
|
||||
<strong>ผู้ให้บริการ:</strong> บริษัท มอร์มินิมอร์ จำกัด<br />
|
||||
<strong>มีผลบังคับใช้วันที่:</strong> 1 มีนาคม 2569<br />
|
||||
<strong>แก้ไขล่าสุด:</strong> 1 เมษายน 2569
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Table of Contents */}
|
||||
<div className="bg-yellow-50 rounded-lg p-6 mb-8 border border-yellow-200">
|
||||
<h2 className="text-xl font-bold mb-4 text-gray-900">สารบัญ</h2>
|
||||
<nav className="space-y-2">
|
||||
<a href="#section-1" className="block text-gray-700 hover:text-accent-blue transition-colors">1. การยอมรับเงื่อนไข</a>
|
||||
<a href="#section-2" className="block text-gray-700 hover:text-accent-blue transition-colors">2. บริการของเรา</a>
|
||||
<a href="#section-3" className="block text-gray-700 hover:text-accent-blue transition-colors">3. บัญชีผู้ใช้</a>
|
||||
<a href="#section-4" className="block text-gray-700 hover:text-accent-blue transition-colors">4. ความเป็นเจ้าของทรัพย์สินทางปัญญา</a>
|
||||
<a href="#section-5" className="block text-gray-700 hover:text-accent-blue transition-colors">5. ข้อห้ามในการใช้งาน</a>
|
||||
<a href="#section-6" className="block text-gray-700 hover:text-accent-blue transition-colors">6. เนื้อหาที่ผู้ใช้ส่ง</a>
|
||||
<a href="#section-7" className="block text-gray-700 hover:text-accent-blue transition-colors">7. การชำระเงิน</a>
|
||||
<a href="#section-8" className="block text-gray-700 hover:text-accent-blue transition-colors">8. การปฏิเสธความรับผิดชอบ</a>
|
||||
<a href="#section-9" className="block text-gray-700 hover:text-accent-blue transition-colors">9. การชดเชย</a>
|
||||
<a href="#section-10" className="block text-gray-700 hover:text-accent-blue transition-colors">10. ความเป็นส่วนตัว</a>
|
||||
<a href="#section-11" className="block text-gray-700 hover:text-accent-blue transition-colors">11. การยุติบริการ</a>
|
||||
<a href="#section-12" className="block text-gray-700 hover:text-accent-blue transition-colors">12. กฎหมายที่ใช้บังคับ</a>
|
||||
<a href="#section-13" className="block text-gray-700 hover:text-accent-blue transition-colors">13. การติดต่อ</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Section 1: Acceptance */}
|
||||
<h2 id="section-1" className="text-2xl font-bold mb-4 text-gray-900 mt-8">1. การยอมรับเงื่อนไข</h2>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">1.1 ข้อตกลง</h3>
|
||||
<p className="mb-6 text-gray-600">
|
||||
ด้วยการเข้าถึงและใช้งานเว็บไซต์ moreminimore.com ("เว็บไซต์") ของบริษัท มอร์มินิมอร์ จำกัด ("เรา", "ของเรา" หรือ "บริษัท") ท่าน ("ผู้ใช้", "ท่าน" หรือ "ของคุณ") ยอมรับและตกลงที่จะถูกผูกมัดด้วยข้อกำหนดและเงื่อนไขฉบับนี้ ("เงื่อนไข")
|
||||
</p>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">1.2 การแก้ไขเงื่อนไข</h3>
|
||||
<p className="mb-4 text-gray-600">
|
||||
เราขอสงวนสิทธิในการแก้ไขเงื่อนไขนี้เมื่อใดก็ได้:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>การแก้ไขจะมีผลทันทีเมื่อโพสต์บนเว็บไซต์</li>
|
||||
<li>ท่านควรตรวจสอบเงื่อนไขนี้เป็นประจำ</li>
|
||||
<li>การใช้งานเว็บไซต์ต่อเนื่องแสดงว่าท่านยอมรับการแก้ไข</li>
|
||||
</ul>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">1.3 อายุขั้นต่ำ</h3>
|
||||
<p className="mb-6 text-gray-600">
|
||||
ท่านต้องมีอายุไม่ต่ำกว่า 20 ปีบริบูรณ์เพื่อใช้งานเว็บไซต์ หากท่านอายุต่ำกว่า 20 ปี ท่านต้องได้รับความยินยอมจากผู้ปกครองและผู้ปกครองต้องตกลงที่จะผูกพันด้วยเงื่อนไขนี้
|
||||
</p>
|
||||
|
||||
{/* Section 2: Services */}
|
||||
<h2 id="section-2" className="text-2xl font-bold mb-4 text-gray-900 mt-8">2. บริการของเรา</h2>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">2.1 คำอธิบายบริการ</h3>
|
||||
<p className="mb-4 text-gray-600">
|
||||
บริษัท มอร์มินิมอร์ จำกัด ให้บริการดังต่อไปนี้:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>บริการพัฒนาเว็บไซต์และแอปพลิเคชั่น</strong> - ออกแบบและพัฒนาเว็บไซต์, แอปพลิเคชั่น, ระบบออนไลน์</li>
|
||||
<li><strong>บริการให้คำปรึกษาเกี่ยวกับเทคโนโลยี</strong> - ที่ปรึกษาด้าน AI, Marketing Automation, Tech Infrastructure</li>
|
||||
<li><strong>จำหน่ายหรือให้เช่าอุปกรณ์ไอที</strong> - อุปกรณ์คอมพิวเตอร์, ซอฟต์แวร์, อุปกรณ์เครือข่าย</li>
|
||||
</ul>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">2.2 การเปลี่ยนแปลงบริการ</h3>
|
||||
<p className="mb-4 text-gray-600">
|
||||
เราขอสงวนสิทธิในการ:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>เพิ่ม ลบ หรือแก้ไขฟีเจอร์ของบริการ</li>
|
||||
<li>ระงับหรือยุติบริการชั่วคราวหรือถาวร</li>
|
||||
<li>จำกัดการเข้าถึงบางส่วนหรือทั้งหมดของบริการ</li>
|
||||
</ul>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">2.3 ความพร้อมของบริการ</h3>
|
||||
<p className="mb-6 text-gray-600">
|
||||
เราพยายามให้บริการอย่างต่อเนื่อง แต่เราไม่รับประกันว่าบริการจะปราศจากข้อผิดพลาด และไม่รับผิดชอบต่อ downtime ที่ไม่ได้ตั้งใจ เราขอสงวนสิทธิในการหยุดให้บริการโดยไม่แจ้งล่วงหน้า
|
||||
</p>
|
||||
|
||||
{/* Section 3: User Accounts */}
|
||||
<h2 id="section-3" className="text-2xl font-bold mb-4 text-gray-900 mt-8">3. บัญชีผู้ใช้</h2>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">3.1 การสร้างบัญชี</h3>
|
||||
<p className="mb-4 text-gray-600">
|
||||
เพื่อใช้งานบริการบางอย่าง ท่านอาจต้องสร้างบัญชีผู้ใช้:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>ท่านต้องให้ข้อมูลที่ถูกต้อง ครบถ้วน และทันสมัย</li>
|
||||
<li>ท่านต้องรักษารหัสผ่านให้เป็นความลับ</li>
|
||||
<li>ท่านรับผิดชอบต่อทุกกิจกรรมที่เกิดขึ้นภายใต้บัญชีของท่าน</li>
|
||||
</ul>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">3.2 ข้อกำหนดของบัญชี</h3>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>หนึ่งคนต่อหนึ่งบัญชีเท่านั้น</li>
|
||||
<li>ห้ามแบ่งปันบัญชีกับผู้อื่น</li>
|
||||
<li>ห้ามใช้ชื่อบัญชีที่ผิดกฎหมายหรือละเมิดสิทธิผู้อื่น</li>
|
||||
</ul>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">3.3 การระงับและลบบัญชี</h3>
|
||||
<p className="mb-6 text-gray-600">
|
||||
เราขอสงวนสิทธิในการระงับหรือลบบัญชีของท่านหากท่านละเมิดเงื่อนไขนี้ มีกิจกรรมที่น่าสงสัย หรือตามข้อกำหนดของกฎหมาย ท่านสามารถลบบัญชีได้เมื่อใดก็ได้โดยติดต่อเราที่ <a href="mailto:contact@moreminimore.com" className="text-accent-blue hover:underline">contact@moreminimore.com</a>
|
||||
</p>
|
||||
|
||||
{/* Section 4: IP */}
|
||||
<h2 id="section-4" className="text-2xl font-bold mb-4 text-gray-900 mt-8">4. ความเป็นเจ้าของทรัพย์สินทางปัญญา</h2>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">4.1 สิทธิของเรา</h3>
|
||||
<p className="mb-4 text-gray-600">
|
||||
เว็บไซต์และเนื้อหาทั้งหมดเป็นทรัพย์สินของเราหรือผู้ให้ใบอนุญาต:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>เนื้อหา ข้อความ กราฟิก โลโก้</li>
|
||||
<li>ซอฟต์แวร์ โค้ด ฐานข้อมูล</li>
|
||||
<li>การออกแบบ เลย์เอาต์</li>
|
||||
</ul>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">4.2 เครื่องหมายการค้า</h3>
|
||||
<p className="mb-6 text-gray-600">
|
||||
เครื่องหมายการค้า โลโก้ และชื่อบริการของเราเป็นเครื่องหมายการค้าของ บริษัท มอร์มินิมอร์ จำกัด ห้ามใช้โดยไม่ได้รับอนุญาตเป็นลายลักษณ์อักษร
|
||||
</p>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">4.3 สิทธิของท่าน</h3>
|
||||
<p className="mb-6 text-gray-600">
|
||||
ท่านยังคงเป็นเจ้าของเนื้อหาที่ท่านส่งมา แต่ท่านให้ใบอนุญาตแก่เราในการใช้เนื้อหานั้น ท่านรับประกันว่ามีสิทธิในการให้ใบอนุญาต
|
||||
</p>
|
||||
|
||||
{/* Section 5: Prohibited */}
|
||||
<h2 id="section-5" className="text-2xl font-bold mb-4 text-gray-900 mt-8">5. ข้อห้ามในการใช้งาน</h2>
|
||||
|
||||
<p className="mb-4 text-gray-600">
|
||||
ท่านตกลงที่จะไม่:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>ใช้เว็บไซต์เพื่อกิจกรรมที่ผิดกฎหมาย</li>
|
||||
<li>ละเมิดสิทธิทางปัญญาของผู้อื่น</li>
|
||||
<li>ละเมิดความเป็นส่วนตัวของผู้อื่น</li>
|
||||
<li>ส่งเนื้อหาที่ผิดกฎหมายหรือเป็นอันตราย</li>
|
||||
<li>เผยแพร่ไวรัส มัลแวร์ หรือโค้ดที่เป็นอันตราย</li>
|
||||
<li>พยายามเข้าถึงระบบโดยไม่ได้รับอนุญาต</li>
|
||||
<li>รบกวนหรือขัดขวางการทำงานของเว็บไซต์</li>
|
||||
<li>ส่งสแปมหรือข้อความเชิงพาณิชย์ที่ไม่พึงประสงค์</li>
|
||||
</ul>
|
||||
|
||||
{/* Section 6: User Content */}
|
||||
<h2 id="section-6" className="text-2xl font-bold mb-4 text-gray-900 mt-8">6. เนื้อหาที่ผู้ใช้ส่ง</h2>
|
||||
|
||||
<p className="mb-6 text-gray-600">
|
||||
โดยส่งเนื้อหาบนเว็บไซต์ ท่านให้ใบอนุญาตแก่เราในการใช้ ทำซ้ำ ดัดแปลง และเผยแพร่เนื้อหานั้น ท่านรับประกันว่ามีสิทธิในการส่งเนื้อหาและเนื้อหาไม่ละเมิดสิทธิของผู้อื่น
|
||||
</p>
|
||||
|
||||
{/* Section 7: Payment */}
|
||||
<h2 id="section-7" className="text-2xl font-bold mb-4 text-gray-900 mt-8">7. การชำระเงิน</h2>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">7.1 ราคาและค่าธรรมเนียม</h3>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>ราคาทั้งหมดแสดงเป็นเงินบาทไทย (THB)</li>
|
||||
<li>ราคายังไม่รวมภาษีมูลค่าเพิ่ม (VAT) หากมี</li>
|
||||
<li>เราขอสงวนสิทธิในการเปลี่ยนราคาเมื่อใดก็ได้</li>
|
||||
</ul>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">7.2 วิธีการชำระเงิน</h3>
|
||||
<p className="mb-4 text-gray-600">
|
||||
เรายอมรับการชำระเงินผ่าน:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>โอนเงินผ่านธนาคาร</li>
|
||||
<li>บัตรเครดิต/เดบิต (ผ่าน payment gateway)</li>
|
||||
<li>QR Code / PromptPay</li>
|
||||
</ul>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">7.3 นโยบายการคืนเงิน</h3>
|
||||
<p className="mb-6 text-gray-600">
|
||||
<strong>เนื่องจากบริการของเราเป็นบริการดิจิทัลและการให้คำปรึกษา การชำระเงินถือเป็นการสั่งซื้อที่สมบูรณ์แล้ว จึงไม่มีนโยบายการคืนเงิน</strong> กรุณาตรวจสอบรายละเอียดและขอบเขตบริการก่อนชำระเงินเสมอ หากมีข้อสงสัย กรุณาติดต่อเราก่อนสั่งซื้อ
|
||||
</p>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">7.4 การต่ออายุอัตโนมัติ</h3>
|
||||
<p className="mb-6 text-gray-600">
|
||||
หากบริการมีการต่ออายุอัตโนมัติ ท่านจะได้รับแจ้งก่อนการต่ออายุ และสามารถยกเลิกได้เมื่อใดก็ได้ก่อนวันต่ออายุ
|
||||
</p>
|
||||
|
||||
{/* Section 8: Disclaimer */}
|
||||
<h2 id="section-8" className="text-2xl font-bold mb-4 text-gray-900 mt-8">8. การปฏิเสธความรับผิดชอบ</h2>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">8.1 "ตามที่เป็น"</h3>
|
||||
<p className="mb-4 text-gray-600">
|
||||
บริการให้บริการ "ตามที่เป็น" และ "ตามที่มี" เราไม่รับประกันว่าบริการจะปราศจากข้อผิดพลาด ตรงตามความต้องการของท่าน หรือถูกต้องสมบูรณ์
|
||||
</p>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">8.2 การปฏิเสธความรับผิดชอบ</h3>
|
||||
<p className="mb-4 text-gray-600">
|
||||
ภายใต้ขอบเขตที่กฎหมายอนุญาต เราปฏิเสธความรับผิดชอบต่อ:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>ความเสียหายโดยตรง ทางอ้อม โดยบังเอิญ หรือเชิงลงโทษ</li>
|
||||
<li>การสูญเสียข้อมูลหรือข้อมูล</li>
|
||||
<li>การหยุดชะงักของธุรกิจ</li>
|
||||
<li>ความเสียหายอื่นๆ</li>
|
||||
</ul>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">8.3 ข้อจำกัดความรับผิด</h3>
|
||||
<p className="mb-6 text-gray-600">
|
||||
ความรับผิดรวมของเราจะไม่เกินจำนวนที่ท่านจ่ายให้เราในช่วง 12 เดือนที่ผ่านมา
|
||||
</p>
|
||||
|
||||
{/* Section 9: Indemnity */}
|
||||
<h2 id="section-9" className="text-2xl font-bold mb-4 text-gray-900 mt-8">9. การชดเชย</h2>
|
||||
|
||||
<p className="mb-4 text-gray-600">
|
||||
ท่านตกลงที่จะชดใช้และปกป้องเราจาก:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>การเรียกร้อง ค่าเสียหาย ค่าใช้จ่ายที่เกิดจากการใช้งานเว็บไซต์ของท่าน</li>
|
||||
<li>ที่เกิดจากการละเมิดเงื่อนไขนี้</li>
|
||||
<li>ที่เกิดจากการละเมิดสิทธิของผู้อื่น</li>
|
||||
</ul>
|
||||
|
||||
{/* Section 10: Privacy */}
|
||||
<h2 id="section-10" className="text-2xl font-bold mb-4 text-gray-900 mt-8">10. ความเป็นส่วนตัว</h2>
|
||||
|
||||
<p className="mb-4 text-gray-600">
|
||||
การใช้ข้อมูลส่วนบุคคลอยู่ภายใต้นโยบายความเป็นส่วนตัวของเรา ซึ่งเป็นส่วนหนึ่งของเงื่อนไขนี้ อ่านได้ที่ <Link href="/privacy-policy" className="text-accent-blue hover:underline">นโยบายความเป็นส่วนตัว</Link>
|
||||
</p>
|
||||
<p className="mb-6 text-gray-600">
|
||||
เราใช้ Cookie และเทคโนโลยีการติดตาม ท่านสามารถจัดการการตั้งค่า Cookie ได้ผ่านแบนเนอร์คุกกี้บนเว็บไซต์ ศึกษาเพิ่มเติมได้ที่ <Link href="/cookie-policy" className="text-accent-blue hover:underline">นโยบายคุกกี้</Link>
|
||||
</p>
|
||||
|
||||
{/* Section 11: Termination */}
|
||||
<h2 id="section-11" className="text-2xl font-bold mb-4 text-gray-900 mt-8">11. การยุติบริการ</h2>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">11.1 การยุติโดยท่าน</h3>
|
||||
<p className="mb-4 text-gray-600">
|
||||
ท่านสามารถยุติการใช้งานเว็บไซต์ได้เมื่อใดก็ได้โดยการหยุดใช้งานและลบบัญชีของท่าน
|
||||
</p>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">11.2 การยุติโดยเรา</h3>
|
||||
<p className="mb-6 text-gray-600">
|
||||
เราขอสงวนสิทธิในการยุติการเข้าถึงของท่านโดยไม่แจ้งล่วงหน้า ด้วยเหตุผลใดๆ หรือไม่มีเหตุผล
|
||||
</p>
|
||||
|
||||
{/* Section 12: Applicable Law */}
|
||||
<h2 id="section-12" className="text-2xl font-bold mb-4 text-gray-900 mt-8">12. กฎหมายที่ใช้บังคับ</h2>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">12.1 กฎหมายไทย</h3>
|
||||
<p className="mb-4 text-gray-600">
|
||||
เงื่อนไขนี้ถูกควบคุมและตีความตามกฎหมายแห่งราชอาณาจักรไทย:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>พระราชบัญญัติคุ้มครองผู้บริโภค</li>
|
||||
<li>พระราชบัญญัติว่าด้วยการกระทำความผิดเกี่ยวกับคอมพิวเตอร์</li>
|
||||
<li>พระราชบัญญัติลิขสิทธิ์</li>
|
||||
<li>พระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562</li>
|
||||
</ul>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-gray-700">12.2 เขตอำนาจศาล</h3>
|
||||
<p className="mb-6 text-gray-600">
|
||||
ข้อพิพาทใดๆ อยู่ภายใต้เขตอำนาจศาลของศาลแพ่ง/ศาลล้มละลายกลาง กรุงเทพมหานคร หรือศาลที่มีเขตอำนาจในประเทศไทย
|
||||
</p>
|
||||
|
||||
{/* Section 13: Contact */}
|
||||
<h2 id="section-13" className="text-2xl font-bold mb-4 text-gray-900 mt-8">13. การติดต่อ</h2>
|
||||
|
||||
<p className="mb-4 text-gray-600">
|
||||
หากท่านมีคำถามเกี่ยวกับเงื่อนไขนี้ กรุณาติดต่อเรา:
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>อีเมล:</strong> <a href="mailto:contact@moreminimore.com" className="text-accent-blue hover:underline">contact@moreminimore.com</a></li>
|
||||
<li><strong>โทรศัพท์:</strong> <a href="tel:0809955945" className="text-accent-blue hover:underline">080-995-5945</a></li>
|
||||
<li><strong>Line:</strong> @539hdlul</li>
|
||||
<li><strong>ที่อยู่:</strong> 53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120</li>
|
||||
</ul>
|
||||
|
||||
{/* Footer Note */}
|
||||
<div className="mt-12 p-6 bg-yellow-50 border-l-4 border-primary rounded">
|
||||
<p className="text-gray-700 text-base">
|
||||
<strong>หมายเหตุ:</strong> ข้อกำหนดและเงื่อนไขนี้เป็นข้อตกลงทางกฎหมายระหว่างคุณกับบริษัท มอร์มินิมอร์ จำกัด กรุณาอ่านอย่างละเอียดและเก็บไว้เป็นหลักฐาน หากมีข้อสงสัย กรุณาปรึกษาที่ปรึกษากฎหมาย
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
23
src/app/(payload)/admin/[[...segments]]/page.tsx
Normal file
23
src/app/(payload)/admin/[[...segments]]/page.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
import config from '@payload-config'
|
||||
import { RootPage, generatePageMetadata } from '@payloadcms/next/views'
|
||||
import { importMap } from '../importMap.js'
|
||||
|
||||
type Args = {
|
||||
params: Promise<{
|
||||
segments: string[]
|
||||
}>
|
||||
searchParams: Promise<{
|
||||
[key: string]: string | string[]
|
||||
}>
|
||||
}
|
||||
|
||||
export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
|
||||
generatePageMetadata({ config, params, searchParams })
|
||||
|
||||
const Page = ({ params, searchParams }: Args) =>
|
||||
RootPage({ config, params, searchParams, importMap })
|
||||
|
||||
export default Page
|
||||
2
src/app/(payload)/admin/importMap.js
Normal file
2
src/app/(payload)/admin/importMap.js
Normal file
@@ -0,0 +1,2 @@
|
||||
/* THIS FILE IS GENERATED BY PAYLOAD - RUN `pnpm generate:importmap` AFTER CHANGING COLLECTIONS */
|
||||
export const importMap = {}
|
||||
18
src/app/(payload)/api/[[...slug]]/route.ts
Normal file
18
src/app/(payload)/api/[[...slug]]/route.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
|
||||
import config from '@payload-config'
|
||||
import '@payloadcms/next/css'
|
||||
import {
|
||||
REST_DELETE,
|
||||
REST_GET,
|
||||
REST_OPTIONS,
|
||||
REST_PATCH,
|
||||
REST_POST,
|
||||
REST_PUT,
|
||||
} from '@payloadcms/next/routes'
|
||||
|
||||
export const GET = REST_GET(config)
|
||||
export const POST = REST_POST(config)
|
||||
export const DELETE = REST_DELETE(config)
|
||||
export const PATCH = REST_PATCH(config)
|
||||
export const PUT = REST_PUT(config)
|
||||
export const OPTIONS = REST_OPTIONS(config)
|
||||
6
src/app/(payload)/api/graphql-playground/route.ts
Normal file
6
src/app/(payload)/api/graphql-playground/route.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
|
||||
/* Run `pnpm generate:importmap` to regenerate */
|
||||
import config from '@payload-config'
|
||||
import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
|
||||
|
||||
export const GET = GRAPHQL_PLAYGROUND_GET(config)
|
||||
6
src/app/(payload)/api/graphql/route.ts
Normal file
6
src/app/(payload)/api/graphql/route.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
|
||||
import config from '@payload-config'
|
||||
import { GRAPHQL_POST, REST_OPTIONS } from '@payloadcms/next/routes'
|
||||
|
||||
export const POST = GRAPHQL_POST(config)
|
||||
export const OPTIONS = REST_OPTIONS(config)
|
||||
1
src/app/(payload)/custom.scss
Normal file
1
src/app/(payload)/custom.scss
Normal file
@@ -0,0 +1 @@
|
||||
/* Custom styles for Payload admin - add your overrides here */
|
||||
30
src/app/(payload)/layout.tsx
Normal file
30
src/app/(payload)/layout.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
|
||||
import config from '@payload-config'
|
||||
import '@payloadcms/next/css'
|
||||
import type { ServerFunctionClient } from 'payload'
|
||||
import { handleServerFunctions, RootLayout } from '@payloadcms/next/layouts'
|
||||
import React from 'react'
|
||||
|
||||
import { importMap } from './admin/importMap.js'
|
||||
import './custom.scss'
|
||||
|
||||
type Args = {
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
const serverFunction: ServerFunctionClient = async function (args) {
|
||||
'use server'
|
||||
return handleServerFunctions({
|
||||
...args,
|
||||
config,
|
||||
importMap,
|
||||
})
|
||||
}
|
||||
|
||||
const Layout = ({ children }: Args) => (
|
||||
<RootLayout config={config} importMap={importMap} serverFunction={serverFunction}>
|
||||
{children}
|
||||
</RootLayout>
|
||||
)
|
||||
|
||||
export default Layout
|
||||
12
src/app/robots.ts
Normal file
12
src/app/robots.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import type { MetadataRoute } from 'next'
|
||||
|
||||
export default function robots(): MetadataRoute.Robots {
|
||||
return {
|
||||
rules: {
|
||||
userAgent: '*',
|
||||
allow: '/',
|
||||
disallow: ['/admin/', '/api/'],
|
||||
},
|
||||
sitemap: 'https://moreminimore.com/sitemap.xml',
|
||||
}
|
||||
}
|
||||
88
src/app/sitemap.ts
Normal file
88
src/app/sitemap.ts
Normal file
@@ -0,0 +1,88 @@
|
||||
import type { MetadataRoute } from 'next'
|
||||
|
||||
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
|
||||
const baseUrl = 'https://moreminimore.com'
|
||||
|
||||
const staticPages: MetadataRoute.Sitemap = [
|
||||
{
|
||||
url: baseUrl,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'weekly',
|
||||
priority: 1,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/about-us`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly',
|
||||
priority: 0.8,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/portfolio`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'weekly',
|
||||
priority: 0.7,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/blog`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'daily',
|
||||
priority: 0.9,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/contact-us`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly',
|
||||
priority: 0.8,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/faq`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly',
|
||||
priority: 0.6,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/services/tech-consult`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly',
|
||||
priority: 0.8,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/services/web-development`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly',
|
||||
priority: 0.8,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/services/marketing-automation`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly',
|
||||
priority: 0.8,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/services/ai-automation`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly',
|
||||
priority: 0.8,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/privacy-policy`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'yearly',
|
||||
priority: 0.3,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/terms-of-service`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'yearly',
|
||||
priority: 0.3,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/cookie-policy`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'yearly',
|
||||
priority: 0.3,
|
||||
},
|
||||
]
|
||||
|
||||
return staticPages
|
||||
}
|
||||
79
src/collections/ConsentLogs.ts
Normal file
79
src/collections/ConsentLogs.ts
Normal file
@@ -0,0 +1,79 @@
|
||||
import type { CollectionConfig } from 'payload'
|
||||
|
||||
export const ConsentLogs: CollectionConfig = {
|
||||
slug: 'consent-logs',
|
||||
admin: {
|
||||
useAsTitle: 'timestamp',
|
||||
defaultColumns: ['timestamp', 'action', 'purpose', 'ip'],
|
||||
},
|
||||
access: {
|
||||
create: () => true,
|
||||
read: () => true,
|
||||
update: () => false,
|
||||
delete: () => false,
|
||||
},
|
||||
fields: [
|
||||
{
|
||||
name: 'action',
|
||||
type: 'select',
|
||||
required: true,
|
||||
options: [
|
||||
{ label: 'Accept', value: 'accept' },
|
||||
{ label: 'Reject', value: 'reject' },
|
||||
{ label: 'Update', value: 'update' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'purpose',
|
||||
type: 'select',
|
||||
required: true,
|
||||
options: [
|
||||
{ label: 'Analytics', value: 'analytics' },
|
||||
{ label: 'Marketing', value: 'marketing' },
|
||||
{ label: 'Functional', value: 'functional' },
|
||||
{ label: 'All', value: 'all' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'analytics',
|
||||
type: 'checkbox',
|
||||
defaultValue: false,
|
||||
},
|
||||
{
|
||||
name: 'marketing',
|
||||
type: 'checkbox',
|
||||
defaultValue: false,
|
||||
},
|
||||
{
|
||||
name: 'functional',
|
||||
type: 'checkbox',
|
||||
defaultValue: false,
|
||||
},
|
||||
{
|
||||
name: 'userAgent',
|
||||
type: 'text',
|
||||
admin: { readOnly: true },
|
||||
},
|
||||
{
|
||||
name: 'ip',
|
||||
type: 'text',
|
||||
admin: { readOnly: true },
|
||||
},
|
||||
{
|
||||
name: 'timestamp',
|
||||
type: 'date',
|
||||
required: true,
|
||||
admin: { readOnly: true },
|
||||
},
|
||||
{
|
||||
name: 'previousConsent',
|
||||
type: 'json',
|
||||
admin: { readOnly: true },
|
||||
},
|
||||
{
|
||||
name: 'newConsent',
|
||||
type: 'json',
|
||||
admin: { readOnly: true },
|
||||
},
|
||||
],
|
||||
}
|
||||
16
src/collections/Media.ts
Normal file
16
src/collections/Media.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import type { CollectionConfig } from 'payload'
|
||||
|
||||
export const Media: CollectionConfig = {
|
||||
slug: 'media',
|
||||
access: {
|
||||
read: () => true,
|
||||
},
|
||||
fields: [
|
||||
{
|
||||
name: 'alt',
|
||||
type: 'text',
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
upload: true,
|
||||
}
|
||||
56
src/collections/Portfolio.ts
Normal file
56
src/collections/Portfolio.ts
Normal file
@@ -0,0 +1,56 @@
|
||||
import type { CollectionConfig } from 'payload'
|
||||
|
||||
export const Portfolio: CollectionConfig = {
|
||||
slug: 'portfolio',
|
||||
admin: {
|
||||
useAsTitle: 'name',
|
||||
defaultColumns: ['name', 'category', 'url'],
|
||||
},
|
||||
access: {
|
||||
read: () => true,
|
||||
create: () => true,
|
||||
update: () => true,
|
||||
delete: () => true,
|
||||
},
|
||||
fields: [
|
||||
{
|
||||
name: 'name',
|
||||
type: 'text',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'url',
|
||||
type: 'text',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'category',
|
||||
type: 'select',
|
||||
required: true,
|
||||
options: [
|
||||
{ label: 'พัฒนาเว็บไซต์', value: 'webdev' },
|
||||
{ label: 'อีคอมเมิร์ซ', value: 'ecommerce' },
|
||||
{ label: 'ที่ปรึกษาการตลาด', value: 'marketing' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'thumbnail',
|
||||
type: 'upload',
|
||||
relationTo: 'media',
|
||||
},
|
||||
{
|
||||
name: 'description',
|
||||
type: 'textarea',
|
||||
},
|
||||
{
|
||||
name: 'services',
|
||||
type: 'array',
|
||||
fields: [
|
||||
{
|
||||
name: 'service',
|
||||
type: 'text',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
73
src/collections/Posts.ts
Normal file
73
src/collections/Posts.ts
Normal file
@@ -0,0 +1,73 @@
|
||||
import type { CollectionConfig } from 'payload'
|
||||
|
||||
export const Posts: CollectionConfig = {
|
||||
slug: 'posts',
|
||||
admin: {
|
||||
useAsTitle: 'title',
|
||||
defaultColumns: ['title', 'slug', 'createdAt'],
|
||||
},
|
||||
access: {
|
||||
read: () => true,
|
||||
create: () => true,
|
||||
update: () => true,
|
||||
delete: () => true,
|
||||
},
|
||||
fields: [
|
||||
{
|
||||
name: 'title',
|
||||
type: 'text',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'slug',
|
||||
type: 'text',
|
||||
required: true,
|
||||
admin: {
|
||||
description: 'URL-friendly version of the title',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'content',
|
||||
type: 'richText',
|
||||
},
|
||||
{
|
||||
name: 'featuredImage',
|
||||
type: 'upload',
|
||||
relationTo: 'media',
|
||||
},
|
||||
{
|
||||
name: 'publishedAt',
|
||||
type: 'date',
|
||||
admin: {
|
||||
date: {
|
||||
pickerAppearance: 'dayAndTime',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'status',
|
||||
type: 'select',
|
||||
options: [
|
||||
{ label: 'Draft', value: 'draft' },
|
||||
{ label: 'Published', value: 'published' },
|
||||
],
|
||||
defaultValue: 'draft',
|
||||
admin: {
|
||||
description: 'Control publication status',
|
||||
},
|
||||
},
|
||||
],
|
||||
hooks: {
|
||||
beforeChange: [
|
||||
({ data }) => {
|
||||
if (data.title && !data.slug) {
|
||||
data.slug = data.title
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, '-')
|
||||
.replace(/(^-|-$)/g, '')
|
||||
}
|
||||
return data
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
12
src/collections/Users.ts
Normal file
12
src/collections/Users.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import type { CollectionConfig } from 'payload'
|
||||
|
||||
export const Users: CollectionConfig = {
|
||||
slug: 'users',
|
||||
admin: {
|
||||
useAsTitle: 'email',
|
||||
},
|
||||
auth: true,
|
||||
fields: [
|
||||
// Email added by default
|
||||
],
|
||||
}
|
||||
137
src/components/CookieBanner.tsx
Normal file
137
src/components/CookieBanner.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
interface ConsentPreferences {
|
||||
analytics: boolean
|
||||
marketing: boolean
|
||||
functional: boolean
|
||||
timestamp: string
|
||||
}
|
||||
|
||||
export default function CookieBanner() {
|
||||
const [visible, setVisible] = useState(false)
|
||||
const [preferences, setPreferences] = useState<ConsentPreferences>({
|
||||
analytics: false,
|
||||
marketing: false,
|
||||
functional: true,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem('consent-preferences')
|
||||
if (!stored) {
|
||||
setVisible(true)
|
||||
} else {
|
||||
setPreferences(JSON.parse(stored))
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (visible) return
|
||||
|
||||
if (preferences.analytics && typeof window !== 'undefined') {
|
||||
loadGA4()
|
||||
loadUmami()
|
||||
}
|
||||
|
||||
window.dispatchEvent(new CustomEvent('consentGiven', { detail: preferences }))
|
||||
}, [visible, preferences])
|
||||
|
||||
function loadGA4() {
|
||||
if (typeof window === 'undefined') return
|
||||
const script = document.createElement('script')
|
||||
script.async = true
|
||||
script.src = `https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA4_ID || 'G-XXXXXXXXXX'}`
|
||||
document.head.appendChild(script)
|
||||
|
||||
const inlineScript = document.createElement('script')
|
||||
inlineScript.text = `
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', '${process.env.NEXT_PUBLIC_GA4_ID || 'G-XXXXXXXXXX'}');
|
||||
`
|
||||
document.head.appendChild(inlineScript)
|
||||
}
|
||||
|
||||
function loadUmami() {
|
||||
if (typeof window === 'undefined') return
|
||||
const script = document.createElement('script')
|
||||
script.defer = true
|
||||
script.src = 'https://umami.moreminimore.com/script.js'
|
||||
script.setAttribute('data-website-id', process.env.NEXT_PUBLIC_UMAMI_ID || 'b2e87a6c-0b64-43c8-bb09-e406ffca0af1')
|
||||
script.setAttribute('data-host-url', 'https://umami.moreminimore.com')
|
||||
document.head.appendChild(script)
|
||||
}
|
||||
|
||||
async function saveConsent(newPrefs: ConsentPreferences) {
|
||||
const prev = localStorage.getItem('consent-preferences')
|
||||
? JSON.parse(localStorage.getItem('consent-preferences')!)
|
||||
: null
|
||||
|
||||
localStorage.setItem('consent-preferences', JSON.stringify(newPrefs))
|
||||
setPreferences(newPrefs)
|
||||
setVisible(false)
|
||||
|
||||
try {
|
||||
await fetch('/api/consent', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
action: newPrefs.analytics ? 'accept' : 'reject',
|
||||
purpose: 'all',
|
||||
analytics: newPrefs.analytics,
|
||||
marketing: newPrefs.marketing,
|
||||
functional: newPrefs.functional,
|
||||
previousConsent: prev,
|
||||
newConsent: newPrefs,
|
||||
}),
|
||||
})
|
||||
} catch (e) {
|
||||
console.warn('Failed to log consent:', e)
|
||||
}
|
||||
}
|
||||
|
||||
if (!visible) return null
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-0 left-0 right-0 z-[100] bg-white shadow-[0_-4px_20px_rgba(0,0,0,0.15)] border-t-4 border-[#fed400]">
|
||||
<div className="container mx-auto px-4 py-6">
|
||||
<div className="flex flex-col md:flex-row md:items-center gap-4">
|
||||
<div className="flex-1">
|
||||
<h2 className="font-bold text-lg mb-1">🍪 เราใช้คุกกี้</h2>
|
||||
<p className="text-sm text-gray-600">
|
||||
เราใช้คุกกี้เพื่อปรับปรุงประสบการณ์การใช้งาน คุณสามารถเลือกได้ว่าจะอนุญาตคุกกี้ประเภทใด
|
||||
{' '}
|
||||
<Link href="/cookie-policy" className="text-[#0ea5e9] hover:underline">
|
||||
อ่านนโยบายคุกกี้
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<button
|
||||
onClick={() => saveConsent({ analytics: true, marketing: true, functional: true, timestamp: new Date().toISOString() })}
|
||||
className="bg-[#fed400] text-black px-6 py-3 rounded-full font-bold hover:bg-[#e6c200] transition"
|
||||
>
|
||||
ยอมรับทั้งหมด
|
||||
</button>
|
||||
<button
|
||||
onClick={() => saveConsent({ analytics: false, marketing: false, functional: true, timestamp: new Date().toISOString() })}
|
||||
className="bg-gray-200 text-black px-6 py-3 rounded-full font-medium hover:bg-gray-300 transition"
|
||||
>
|
||||
ปฏิเสธทั้งหมด
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setVisible(false)}
|
||||
className="text-gray-500 px-4 py-3 hover:text-gray-700 transition text-sm"
|
||||
>
|
||||
ตั้งค่าเอง
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
89
src/components/Footer.tsx
Normal file
89
src/components/Footer.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import Link from 'next/link'
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="bg-white text-black py-12 border-t-4 border-[#fed400]">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid md:grid-cols-4 gap-8">
|
||||
{/* Logo + Description */}
|
||||
<div>
|
||||
<img
|
||||
src="/branding/logo-long.png"
|
||||
alt="MoreminiMore Logo"
|
||||
className="h-10 w-auto mb-4"
|
||||
width={180}
|
||||
height={45}
|
||||
/>
|
||||
<p className="text-gray-700 text-sm">
|
||||
ที่ปรึกษาองค์กร AI เพิ่มยอดขายด้วยข้อมูล
|
||||
</p>
|
||||
<div className="mt-4 flex gap-3">
|
||||
<a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" className="text-gray-600 hover:text-[#0ea5e9] transition">
|
||||
<img src="/icons/social/facebook.svg" alt="Facebook" className="w-6 h-6" />
|
||||
</a>
|
||||
<a href="https://twitter.com/moreminimore" target="_blank" rel="noopener noreferrer" className="text-gray-600 hover:text-[#0ea5e9] transition">
|
||||
<img src="/icons/social/x.svg" alt="X (Twitter)" className="w-6 h-6" />
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/company/moreminimore" target="_blank" rel="noopener noreferrer" className="text-gray-600 hover:text-[#0ea5e9] transition">
|
||||
<img src="/icons/social/linkedin.svg" alt="LinkedIn" className="w-6 h-6" />
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" className="text-gray-600 hover:text-[#0ea5e9] transition">
|
||||
<img src="/icons/social/line.svg" alt="LINE" className="w-6 h-6" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Services */}
|
||||
<div>
|
||||
<h3 className="font-bold mb-4 text-lg">บริการ</h3>
|
||||
<ul className="space-y-2 text-sm text-gray-700">
|
||||
<li><Link href="/services/tech-consult" className="hover:text-[#0ea5e9] transition">Tech Consult</Link></li>
|
||||
<li><Link href="/services/web-development" className="hover:text-[#0ea5e9] transition">AI-Enhanced Website</Link></li>
|
||||
<li><Link href="/services/marketing-automation" className="hover:text-[#0ea5e9] transition">Marketing Automation</Link></li>
|
||||
<li><Link href="/services/ai-automation" className="hover:text-[#0ea5e9] transition">AI Automation</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Links */}
|
||||
<div>
|
||||
<h3 className="font-bold mb-4 text-lg">ลิงก์</h3>
|
||||
<ul className="space-y-2 text-sm text-gray-700">
|
||||
<li><Link href="/about-us" className="hover:text-[#0ea5e9] transition">เกี่ยวกับเรา</Link></li>
|
||||
<li><Link href="/contact-us" className="hover:text-[#0ea5e9] transition">ติดต่อเรา</Link></li>
|
||||
<li><Link href="/blog" className="hover:text-[#0ea5e9] transition">บทความ</Link></li>
|
||||
<li><Link href="/privacy-policy" className="hover:text-[#0ea5e9] transition">นโยบายความเป็นส่วนตัว</Link></li>
|
||||
<li><Link href="/terms-of-service" className="hover:text-[#0ea5e9] transition">ข้อกำหนดและเงื่อนไข</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contact */}
|
||||
<div>
|
||||
<h3 className="font-bold mb-4 text-lg">ติดต่อ</h3>
|
||||
<ul className="space-y-3 text-sm text-gray-700">
|
||||
<li className="flex items-center gap-2">
|
||||
<span>📞</span>
|
||||
<a href="tel:0809955945" className="hover:text-[#0ea5e9] transition">080-995-5945</a>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span>📧</span>
|
||||
<a href="mailto:contact@moreminimore.com" className="hover:text-[#0ea5e9] transition">contact@moreminimore.com</a>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span>📍</span>
|
||||
<span>53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span>🕐</span>
|
||||
<span>จ-ศ: 9:00 - 18:00 น.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-200 mt-8 pt-8 text-center text-sm text-gray-600">
|
||||
<p>© {new Date().getFullYear()} MoreminiMore Co.,Ltd. สงวนลิขสิทธิ์</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
121
src/components/Navigation.tsx
Normal file
121
src/components/Navigation.tsx
Normal file
@@ -0,0 +1,121 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default function Navigation() {
|
||||
const [mobileOpen, setMobileOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<header className="bg-white sticky top-0 z-50 shadow-lg">
|
||||
{/* Top Bar */}
|
||||
<div className="bg-black text-white py-2">
|
||||
<div className="container mx-auto px-4 flex flex-wrap justify-center items-center text-sm">
|
||||
<div className="flex gap-4">
|
||||
<a href="mailto:contact@moreminimore.com" className="hover:text-[#fed400] transition">
|
||||
contact@moreminimore.com
|
||||
</a>
|
||||
<a href="tel:0809955945" className="hover:text-[#fed400] transition">
|
||||
080-995-5945
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="container mx-auto px-4 py-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<Link href="/" className="flex-shrink-0">
|
||||
<img
|
||||
src="/branding/logo-long-black.png"
|
||||
alt="MoreminiMore Logo"
|
||||
className="h-12 w-auto"
|
||||
width={200}
|
||||
height={50}
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<nav className="hidden md:flex gap-6 items-center">
|
||||
<Link href="/" className="hover:text-[#0ea5e9] transition font-medium">
|
||||
หน้าแรก
|
||||
</Link>
|
||||
<Link href="/about-us" className="hover:text-[#0ea5e9] transition font-medium">
|
||||
เกี่ยวกับเรา
|
||||
</Link>
|
||||
|
||||
{/* Services Dropdown */}
|
||||
<div className="relative group">
|
||||
<button className="hover:text-[#0ea5e9] transition font-medium flex items-center gap-1">
|
||||
บริการ
|
||||
<svg className="w-4 h-4 transition group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<div className="absolute left-0 mt-2 w-64 bg-white rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
|
||||
<div className="py-2">
|
||||
<Link href="/services/tech-consult" className="flex items-center gap-3 px-4 py-2 hover:bg-gray-50 transition">
|
||||
<span>Tech Consult</span>
|
||||
</Link>
|
||||
<Link href="/services/web-development" className="flex items-center gap-3 px-4 py-2 hover:bg-gray-50 transition">
|
||||
<span>AI-Enhanced Website</span>
|
||||
</Link>
|
||||
<Link href="/services/marketing-automation" className="flex items-center gap-3 px-4 py-2 hover:bg-gray-50 transition">
|
||||
<span>Marketing Automation</span>
|
||||
</Link>
|
||||
<Link href="/services/ai-automation" className="flex items-center gap-3 px-4 py-2 hover:bg-gray-50 transition">
|
||||
<span>AI Automation</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link href="/portfolio" className="hover:text-[#0ea5e9] transition font-medium">
|
||||
ผลงาน
|
||||
</Link>
|
||||
<Link href="/faq" className="hover:text-[#0ea5e9] transition font-medium">
|
||||
FAQ
|
||||
</Link>
|
||||
<Link href="/blog" className="hover:text-[#0ea5e9] transition font-medium">
|
||||
บทความ
|
||||
</Link>
|
||||
<Link href="/contact-us" className="hover:text-[#0ea5e9] transition font-medium">
|
||||
ติดต่อเรา
|
||||
</Link>
|
||||
<Link
|
||||
href="tel:0809955945"
|
||||
className="bg-[#fed400] text-black px-6 py-3 rounded-full font-bold hover:bg-[#e6c200] transition-all duration-300 hover:scale-105 flex items-center gap-2"
|
||||
>
|
||||
โทรเลย
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button className="md:hidden text-black" onClick={() => setMobileOpen(!mobileOpen)}>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={mobileOpen ? 'M6 18L18 6M6 6l12 12' : 'M4 6h16M4 12h16M4 18h16'} />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<div className={`md:hidden ${mobileOpen ? 'block' : 'hidden'}`}>
|
||||
<div className="flex flex-col gap-4 mt-4 pb-4">
|
||||
<Link href="/" className="hover:text-[#0ea5e9] transition font-medium">หน้าแรก</Link>
|
||||
<Link href="/about-us" className="hover:text-[#0ea5e9] transition font-medium">เกี่ยวกับเรา</Link>
|
||||
<Link href="/services/tech-consult" className="hover:text-[#0ea5e9] transition font-medium">Tech Consult</Link>
|
||||
<Link href="/services/web-development" className="hover:text-[#0ea5e9] transition font-medium">AI-Enhanced Website</Link>
|
||||
<Link href="/services/marketing-automation" className="hover:text-[#0ea5e9] transition font-medium">Marketing Automation</Link>
|
||||
<Link href="/services/ai-automation" className="hover:text-[#0ea5e9] transition font-medium">AI Automation</Link>
|
||||
<Link href="/portfolio" className="hover:text-[#0ea5e9] transition font-medium">ผลงาน</Link>
|
||||
<Link href="/faq" className="hover:text-[#0ea5e9] transition font-medium">FAQ</Link>
|
||||
<Link href="/blog" className="hover:text-[#0ea5e9] transition font-medium">บทความ</Link>
|
||||
<Link href="/contact-us" className="hover:text-[#0ea5e9] transition font-medium">ติดต่อเรา</Link>
|
||||
<Link href="tel:0809955945" className="bg-[#fed400] text-black px-6 py-3 rounded-full font-bold text-center">
|
||||
โทรเลย
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
1
src/index.ts
Normal file
1
src/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as config } from './payload.config'
|
||||
43
src/payload.config.ts
Normal file
43
src/payload.config.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { postgresAdapter } from '@payloadcms/db-postgres'
|
||||
import { lexicalEditor } from '@payloadcms/richtext-lexical'
|
||||
import path from 'path'
|
||||
import { buildConfig } from 'payload'
|
||||
import { fileURLToPath } from 'url'
|
||||
import sharp from 'sharp'
|
||||
|
||||
import { Users } from './collections/Users'
|
||||
import { Media } from './collections/Media'
|
||||
import { Posts } from './collections/Posts'
|
||||
import { ConsentLogs } from './collections/ConsentLogs'
|
||||
import { Portfolio } from './collections/Portfolio'
|
||||
|
||||
const filename = fileURLToPath(import.meta.url)
|
||||
const dirname = path.dirname(filename)
|
||||
|
||||
export default buildConfig({
|
||||
admin: {
|
||||
user: Users.slug,
|
||||
importMap: {
|
||||
baseDir: path.resolve(dirname),
|
||||
},
|
||||
},
|
||||
collections: [
|
||||
Users,
|
||||
Media,
|
||||
Posts,
|
||||
ConsentLogs,
|
||||
Portfolio,
|
||||
],
|
||||
editor: lexicalEditor(),
|
||||
secret: process.env.PAYLOAD_SECRET || '',
|
||||
typescript: {
|
||||
outputFile: path.resolve(dirname, 'payload-types.ts'),
|
||||
},
|
||||
db: postgresAdapter({
|
||||
pool: {
|
||||
connectionString: process.env.DATABASE_URL || '',
|
||||
},
|
||||
}),
|
||||
sharp,
|
||||
plugins: [],
|
||||
})
|
||||
28
tsconfig.json
Normal file
28
tsconfig.json
Normal file
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
"@payload-config": ["./src/payload.config.ts"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
1
tsconfig.tsbuildinfo
Normal file
1
tsconfig.tsbuildinfo
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user