LumoraSaaS Landing

Mở index.html bằng trình soạn thảo: mọi chữ trên trang đều viết trực tiếp ở đây, nên công cụ tìm kiếm đọc được. File này gắn hai file nằm cạnh nó:

<link rel="stylesheet" href="saas-landing.css" />
<script src="saas-landing.js" defer></script>

• Giá: mỗi <span data-price data-monthly="29" data-yearly="23">29</span> là giá mỗi chỗ ngồi mỗi tháng; giữ giá theo tháng làm nội dung chữ. Câu thông báo khi đổi kỳ thanh toán là data-status-monthly / data-status-yearly trên phần tử [data-pricing].
• Tính năng: chép thêm một <li class="sl-tile">. sl-tile--large, --wide hoặc --small quyết định kích thước; cảnh bên trong là sl-visual--signals, experiments, copilot, realtime, roadmap, privacy hoặc integrations.
• Logo: mỗi công ty một <li class="sl-wordmark sl-wordmark--a">; từ a tới h là tám kiểu logo khác nhau. Thay bằng thẻ <img> nếu có logo thật.
• Số liệu: <span data-countup="99.99" data-decimals="2" data-suffix="%">99.99%</span> đếm lên tới data-countup (có thêm data-prefix). Giữ giá trị cuối cùng làm nội dung chữ.
• FAQ: mỗi câu hỏi một <details name="faq">. Cùng một name nên mỗi lúc chỉ mở một câu.
• Nhận xét: mỗi lời nhận xét một [data-carousel-slide]; các chấm trang được vẽ tự động.

Script tự gắn mọi hành vi theo data attribute khi trang tải xong. Với phần HTML thêm vào sau, gọi SaasLanding.init(container); hàm này trả về một hàm để gỡ ra. Mã nguồn dễ đọc nằm trong src/ (src/core/ gồm mỗi hành vi một module nhỏ) nếu bạn muốn build lại.

Bản tải về là một dự án Vite + React 19 + TypeScript hoàn chỉnh:

npm install
npm run dev      # http://localhost:5173
npm run build    # file tĩnh trong dist/

• src/app/content.ts — mọi chữ, mức giá, lời nhận xét và câu trả lời, có kiểu đầy đủ. Sửa ở đây là trang đổi theo.
• src/app/sections/ — mỗi phần của trang một component; src/app/ui/ — các atom và molecule dùng chung.
• src/core/ — phần hành vi (giao diện, menu, scroll-spy, bảng giá, băng chuyền, đếm số…), đúng đoạn mã bản HTML đang chạy, gắn vào qua hook useBehaviour.
• src/saas-landing.css — stylesheet duy nhất, dùng chung cho cả hai bản.

Chạy được với React 18 và 19.

App.tsx mở đầu bằng "use client", nên App Router dùng được ngay. Chép src/app, src/core và src/saas-landing.css vào dự án (ví dụ vào components/lumora/, giữ ba thứ nằm cạnh nhau), rồi:

// app/page.tsx
import { App } from "@/components/lumora/app/App";

export default function Page() {
  return <App />;
}

Đặt id top cho <body> trong app/layout.tsx (logo và nút "Back to top" trỏ về đó). Muốn áp giao diện đã lưu trước lần vẽ đầu tiên, chép đoạn script nhỏ trong index.html vào <head> của layout và thêm suppressHydrationWarning vào <html>.

Khi không có action, form chỉ kiểm tra địa chỉ email rồi hiện lời cảm ơn, nên bản demo chạy được cả khi offline. Để nhận người đăng ký thật, điền địa chỉ dịch vụ bản tin hoặc dịch vụ form — Buttondown, ConvertKit, Formspree, hay endpoint của riêng bạn nhận form POST và trả về mã 2xx:

<form class="sl-newsletter__form" action="https://formspree.io/f/your-form-id" method="post" novalidate …>

Ở bản React, đặt action trong NEWSLETTER của content.ts. Dữ liệu được gửi dạng form data kèm Accept: application/json; nếu dịch vụ báo lỗi, người xem được nhắc thử lại. Ô ẩn _gotcha chặn các bot spam đơn giản. Câu báo lỗi nằm ngay trên ô nhập: data-error-required và data-error-email.

Mọi thứ là custom property trên :root, ở đầu file saas-landing.css. Màu viết dạng light-dark(sáng, tối), nên một dòng áp cho cả hai giao diện.

Property	Thay đổi gì
--sl-bg, --sl-bg-raised, --sl-bg-sunken, --sl-text, --sl-muted	Màu nền trang, nền thẻ và màu chữ
--sl-line, --sl-line-strong, --sl-glass, --sl-glass-strong, --sl-glass-edge, --sl-shadow	Đường kẻ mảnh, kính mờ và bóng đổ
--sl-violet, --sl-pink, --sl-cyan, --sl-green	Các màu cực quang, dùng cho bầu trời, dải màu và điểm nhấn
--sl-gradient, --sl-gradient-text	Dải màu thương hiệu, và bản tương phản cao hơn dùng cho chữ
--sl-aurora-strength	Độ đậm của cực quang (đặt riêng cho từng giao diện)
--sl-cta, --sl-on-cta, --sl-cta-glow	Nút chính, chữ trên nút và quầng sáng của nút
--sl-focus, --sl-danger, --sl-success	Viền focus, lỗi form, trạng thái thành công
--sl-font-display, --sl-font-body, --sl-font-mono, --sl-display-weight	Chữ
--sl-radius-xl, --sl-radius-lg, --sl-radius, --sl-radius-sm, --sl-max, --sl-gutter, --sl-section-space	Hình khối và bố cục
--sl-ease, --sl-reveal-duration, --sl-aurora-duration, --sl-mock-loop, --sl-feature-loop, --sl-marquee-duration	Chuyển động

Font: trang chỉ dùng font hệ thống nên không tải gì thêm. Muốn dùng font riêng, thêm @font-face (hoặc stylesheet của dịch vụ font) rồi đặt, chẳng hạn, --sl-font-display: "Your Display", sans-serif;.

Giao diện: data-theme="light" hoặc "dark" trên <html> cố định giao diện lúc mở trang; nếu không có, trang theo cài đặt hệ thống của người xem. Nút chuyển giao diện nhớ lựa chọn trong localStorage (saas-landing-theme).

Cả hai bản đều là file tĩnh: tải thư mục HTML, hoặc thư mục dist/ của dự án React sau khi npm run build, lên Netlify, Vercel, Cloudflare Pages, GitHub Pages hay hosting bất kỳ.