- {products.map((p, idx) => (
-
-
{p.category}
-
- {p.items.map((item, i) => - {item}
)}
-
+type Props = { products: Product[] };
+
+export default function ProductGrid({products}: Props) {
+ const has = Array.isArray(products) && products.length > 0;
+ if (!has) {
+ return (
+
+ Products will appear here.
+
+ );
+ }
+
+ return (
+
+ {products.map((p, idx) => {
+ const count = Array.isArray(p.items) ? p.items.length : 0;
+ return (
+
+ {/* hairline บน-ล่างแบบ editorial */}
+
+
+ {/* header */}
+
+
+ {p.category}
+
+
+ {count.toLocaleString()}
+
+
+
+ {/* list */}
+
+
+ {(p.items ?? []).map((item, i) => (
+ -
+
+ {item}
+
+
+ ))}
+
+
+ );
+ })}
- ))}
-
- );
-}
\ No newline at end of file
+ );
+}
diff --git a/src/app/components/Section.tsx b/src/app/components/Section.tsx
index a25512e..7f43353 100644
--- a/src/app/components/Section.tsx
+++ b/src/app/components/Section.tsx
@@ -1,15 +1,29 @@
-import { ReactNode } from "react";
+import {ReactNode} from "react";
-export default function Section({ id, title, subtitle, children }: { id?: string; title: string; subtitle?: string; children?: ReactNode }) {
- return (
-
-
-
-
{title}
- {subtitle &&
{subtitle}
}
-
- {children}
-
- );
-}
\ No newline at end of file
+export default function Section({
+ id,
+ title,
+ subtitle,
+ children,
+ }: {
+ id?: string;
+ title: string;
+ subtitle?: string;
+ children?: ReactNode;
+}) {
+ return (
+
+
+
+
{title}
+ {subtitle ? (
+
+ {subtitle}
+
+ ) : null}
+
+ {children}
+
+ );
+}
diff --git a/src/app/components/StatCard.tsx b/src/app/components/StatCard.tsx
index ad585f1..37b329d 100644
--- a/src/app/components/StatCard.tsx
+++ b/src/app/components/StatCard.tsx
@@ -1,9 +1,22 @@
-export default function StatCard({ title, value, note }: { title: string; value: string; note?: string }) {
- return (
-
-
{value}
-
{title}
- {note &&
{note}
}
-
- );
-}
\ No newline at end of file
+// src/app/components/StatCard.tsx
+type Props = {
+ title: string;
+ value: string;
+ note?: string;
+};
+
+export default function StatCard({title, value, note}: Props) {
+ return (
+
+
+ {value || "-"}
+
+
{title}
+ {note ?
{note}
: null}
+
+ );
+}
diff --git a/src/app/components/Timeline.tsx b/src/app/components/Timeline.tsx
index b238800..504759d 100644
--- a/src/app/components/Timeline.tsx
+++ b/src/app/components/Timeline.tsx
@@ -1,17 +1,63 @@
-import { Milestone } from "@/lib/data";
+import {Milestone} from "@/app/lib/data";
-export default function Timeline({ entries }: { entries: Milestone[] }) {
- return (
-
- {entries.map((ms, idx) => (
- -
-
-
{ms.year}
-
- {ms.items.map((it, i) => - {it}
)}
-
-
- ))}
-
- );
-}
\ No newline at end of file
+export default function Timeline({entries}: { entries: Milestone[] }) {
+ return (
+
+ {entries.map((ms, idx) => (
+ -
+ {/* ============ แถวบน: จุด + เส้นท่อนบน + ปี ============ */}
+
+ {/* เส้นท่อนบน: ยาวถึงขอบนอกของจุด (50% - 11px) */}
+ {idx > 0 && (
+
+ )}
+
+ {/* จุด */}
+
+
+
+ {/* ปี — อยู่แถวเดียวกับจุด เพื่อให้ “ตรงแนว” กันเสมอ */}
+
+
+ {ms.year}
+
+
+
+ {/* ============ แถวล่าง: เส้นท่อนล่าง + รายการ ============ */}
+ {/* ดันเส้นล่างขึ้นมา 11px ให้ชนขอบจุดพอดี */}
+
+ {idx < entries.length - 1 && (
+
+ )}
+
+
+
+
+ {ms.items.map((it, i) => (
+ -
+
+
{it}
+
+ ))}
+
+
+ ))}
+
+ );
+}
diff --git a/src/app/fonts.ts b/src/app/fonts.ts
index e69de29..e6d314d 100644
--- a/src/app/fonts.ts
+++ b/src/app/fonts.ts
@@ -0,0 +1,10 @@
+import localFont from "next/font/local";
+
+export const dbHeavent = localFont({
+ src: [
+ {path: "./font/dbheavent/DBHeavent-Regular.woff2", weight: "400", style: "normal"},
+ {path: "./font/dbheavent/DBHeavent-Bold.woff2", weight: "700", style: "normal"},
+ ],
+ display: "swap",
+ preload: true,
+});
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f7fa87e..7054f12 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,34 +1,27 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import type {Metadata} from "next";
+import Nav from "@/app/components/Nav";
+import Footer from "@/app/components/Footer";
import "./globals.css";
-
-const geistSans = Geist({
- variable: "--font-geist-sans",
- subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
- variable: "--font-geist-mono",
- subsets: ["latin"],
-});
+import {dbHeavent} from "./fonts";
export const metadata: Metadata = {
- title: "Create Next App",
- description: "Generated by create next app",
+ title: "Create Next App",
+ description: "Generated by create next app",
};
export default function RootLayout({
- children,
-}: Readonly<{
- children: React.ReactNode;
+ children,
+ }: Readonly<{
+ children: React.ReactNode;
}>) {
- return (
-
-
- {children}
-
-
- );
+ return (
+
+ {/* ✅ ต้องมี ไม่งั้น Next.js จะเตือน/พัง hydration */}
+
+
+
{children}
+
+
+
+ );
}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 295f8fd..9f9e99e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,65 +1,198 @@
-import Image from "next/image";
+// src/app/page.tsx
+import Link from "next/link";
+import {company, milestones, products} from "@/app/lib/data";
-export default function Home() {
- return (
-
-
-
-
-
- To get started, edit the page.tsx file.
-
-
- Looking for a starting point or more instructions? Head over to{" "}
-
- Templates
- {" "}
- or the{" "}
-
- Learning
- {" "}
- center.
-
-
-
- );
+// แปลง milestones เป็นรายการเรียบ ๆ สำหรับโชว์หน้าโฮม (เอาแค่ 5 รายการแรก)
+function getHighlights() {
+ try {
+ const list = (milestones ?? [])
+ .flatMap((ms) => (ms.items ?? []).map((text) => ({year: ms.year, text})))
+ .slice(0, 5);
+ return list;
+ } catch {
+ return [];
+ }
+}
+
+export default function HomePage() {
+ const highlights = getHighlights();
+
+ const productLines = Array.isArray(products) ? products.length : 0;
+ const years = (milestones ?? [])
+ .map((m) => Number(m.year))
+ .filter((n) => Number.isFinite(n));
+ const minYear = years.length ? Math.min(...years) : null;
+ const maxYear = years.length ? Math.max(...years) : null;
+ const milestonesCount = (milestones ?? []).reduce(
+ (acc, m) => acc + (m.items ?? []).length,
+ 0
+ );
+
+ return (
+ <>
+ {/* ===== HERO: Split (ซ้ายข้อความ / ขวาสื่อ) — ขาว-แพง พร้อม hairline & media fallback ===== */}
+
+
+
+ {/* hairline บน */}
+
+
+ {/* Left: Text */}
+
+
+ AMREZ Group
+
+ Portfolio
+
+
+
+ KATHY · AMREZ
+
+
+ {company.tagline}
+
+
+
+
+ ติดต่อทีมงาน
+
+
+
+ {/* At a glance — จริงจากข้อมูล ไม่รก */}
+
+
+
+ Product Lines
+
+
+ {productLines}
+
+
+
+
+ Years
+
+
+ {minYear && maxYear ? `${minYear}–${maxYear}` : "—"}
+
+
+
+
+ Milestones
+
+
+ {milestonesCount.toLocaleString()}
+
+
+
+
+
+ {/* Right: Media (มี fallback ไม่ต้องพึ่งรูปก็ยังดูแพง) */}
+
+
+
+ {/* กรอบในแบบ editorial ให้มิติขึ้น */}
+
+
+
+ {/* hairline ล่าง */}
+
+
+
+
+ {/* ===== WHAT WE DO ===== */}
+
+
+
เราทำอะไร
+
+ {company.about}
+
+
+
+
+
Cosmetics
+
+ เครื่องสำอางสำหรับทุกวันและงานโชว์ เน้นการใช้งานจริง สีสม่ำเสมอ คุมฟินิชได้
+
+
+
+
Skincare
+
+ ทำความสะอาด กันแดด และเซรั่มเฉพาะจุด โฟกัสความสม่ำเสมอและความสบายผิว
+
+
+
+
Supplements
+
+ สูตรเรียบง่ายสำหรับโกลว์ พลังงานประจำวัน และสนับสนุนระบบทางเดินอาหาร
+
+
+
+
+
+ {/* ===== HIGHLIGHTS (list) ===== */}
+
+
+
Highlights
+
+ {highlights.length === 0 ? (
+
+ — เพิ่มรายการใน milestones เพื่อแสดงบนหน้าแรก —
+
+ ) : (
+
+ {highlights.map((h, i) => (
+ -
+
+
+ {h.year}
+
+
{h.text}
+
+ ))}
+
+ )}
+
+
+
+ ติดต่อเรา
+
+
+
+
+ );
}
+ ) : (
+ 
-
-
-
- 
+
+
+ {/* เมนูเดสก์ท็อป: คอลัมน์กลาง (พื้นที่ยืด) ชิดขวา */}
+
+
+ {/* ปุ่มเมนูมือถือ: คอลัมน์ขวา ชิดขวา */}
+
+