// SKEight — Home page sections (continued)
// ─────────────────────────────────────────────────────────────
// FEATURES — Detailed feature grid
// ─────────────────────────────────────────────────────────────
function Features() {
const items = [
{ en: "Chart Structure", desc: "Year, month, day, and hour pillars calculated with solar-term boundaries and true-solar-time correction." },
{ en: "Day Master", desc: "The central reference point of the chart, explained in plain language without making it sound like a verdict." },
{ en: "Element Balance", desc: "Wood, Fire, Earth, Metal, and Water are counted, weighted, and graphed across visible and hidden chart signals." },
{ en: "Ten-Year Cycles", desc: "Past, current, and future phases are laid out as a timeline you can return to." },
{ en: "Year-by-Year", desc: "Annual pillars inside the current ten-year cycle, with career, health, and relationship signals shown in context." },
{ en: "Daily Insight", desc: "Today’s pillar relationship to your primary chart, paired with a short reflective note." },
];
return (
);
}
// ─────────────────────────────────────────────────────────────
// FIVE ELEMENTS — Visual section
// ─────────────────────────────────────────────────────────────
function FiveElements() {
const els = ["wood", "fire", "earth", "metal", "water"];
return (
Five elements
Five elements, in quiet conversation.
Every pillar carries elements that generate, control, and balance each other. SKEight surfaces those relationships in plain English — without the cliché charts you've already seen.
);
}
function Cycle({ label, desc }) {
return (
{label}
{desc}
);
}
function ElementsRing({ els }) {
// pentagonal arrangement
const size = 480;
const r = size / 2;
const radius = r * 0.78;
const positions = els.map((el, i) => {
const a = (Math.PI * 2 * i) / 5 - Math.PI / 2;
return { el, x: r + Math.cos(a) * radius, y: r + Math.sin(a) * radius };
});
// generating cycle lines (each → next)
// controlling cycle lines (each → +2)
return (
);
}
// ─────────────────────────────────────────────────────────────
// READING ANGLES — career, relationships, health
// ─────────────────────────────────────────────────────────────
function ReadingAngles() {
const angles = [
{ en: "Career", note: "Where the chart gathers drive, pressure, craft, and the way you meet the outer world." },
{ en: "Relationships", note: "The rhythm of attraction, distance, support, and tension around the people closest to you." },
{ en: "Health", note: "Elemental imbalance described in the traditional language of Wood, Fire, Earth, Metal, and Water." },
];
return (
Reading angles
Three doors into the same chart — each opening a different part of the pattern.