File size: 3,386 Bytes
65d68f5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | const moments = [
{
time: "Yesterday · 8:42 pm",
label: "Stopped",
title: "Ray diagrams · Step 8",
note: "The lesson stays unfinished. Opening the page again does not erase your place.",
active: false,
},
{
time: "Tonight · first",
label: "Continue",
title: "Finish the same diagram",
note: "Continuation comes before a random new chapter. One clear action is placed first.",
active: true,
},
{
time: "After your answer",
label: "Correct",
title: "Repair the missing image rule",
note: "A partial answer creates a short correction—not a fake mastery increase.",
active: false,
},
{
time: "Tomorrow",
label: "Remember",
title: "Revise only if it is still needed",
note: "Successful repair moves on. Unfinished work returns with a reason.",
active: false,
},
] as const;
export function ConnectedLearningLoop() {
return (
<section
id="living-plan"
className="border-t border-[var(--df-border)] bg-[#171716] py-[clamp(4rem,8vw,7.5rem)] text-white"
>
<div className="df-container">
<div className="grid gap-12 lg:grid-cols-[0.72fr_1.28fr] lg:gap-20">
<div className="max-w-md">
<p className="text-[12px] font-semibold uppercase tracking-[0.12em] text-white/55">
One continuous evening
</p>
<h2 className="mt-5 text-[clamp(2rem,4.2vw,3.6rem)] font-semibold leading-[1.02] tracking-[-0.045em]">
What you do today changes tomorrow.
</h2>
<p className="mt-6 text-[16px] leading-7 text-white/65">
DocDoe is not five tools sharing a logo. The plan, lesson,
correction and revision read the same student history.
</p>
<p className="mt-8 border-l border-white/25 pl-4 text-[13px] leading-6 text-white/55">
Example Kerala SSLC evening. Every state shown here corresponds to
a real product action; it is not a coverage claim.
</p>
</div>
<ol className="border-t border-white/20">
{moments.map((moment, index) => (
<li
key={moment.time}
className={`grid gap-4 border-b border-white/20 py-6 sm:grid-cols-[8.5rem_5.5rem_minmax(0,1fr)] sm:gap-6 sm:py-7 ${
moment.active ? "bg-white/[0.045] sm:-mx-5 sm:px-5" : ""
}`}
>
<div className="flex items-center justify-between gap-4 sm:block">
<span className="text-[11px] font-semibold tabular-nums text-white/40">
{String(index + 1).padStart(2, "0")}
</span>
<p className="text-[12px] leading-5 text-white/55 sm:mt-3">{moment.time}</p>
</div>
<p className="text-[12px] font-semibold uppercase tracking-[0.1em] text-white/55">
{moment.label}
</p>
<div>
<h3 className="text-[18px] font-semibold tracking-[-0.025em] sm:text-[20px]">
{moment.title}
</h3>
<p className="mt-2 max-w-xl text-[14px] leading-6 text-white/60">{moment.note}</p>
</div>
</li>
))}
</ol>
</div>
</div>
</section>
);
}
|