| "use client"; |
|
|
| |
| |
| |
| |
|
|
| import Image from "next/image"; |
| import { motion, useReducedMotion, type Variants } from "framer-motion"; |
|
|
| const revealEase = [0.16, 1, 0.3, 1] as const; |
|
|
| const reveal: Variants = { |
| hidden: { opacity: 0, y: 16 }, |
| visible: (step = 0) => ({ |
| opacity: 1, |
| y: 0, |
| transition: { duration: 0.6, delay: step * 0.07, ease: revealEase }, |
| }), |
| }; |
|
|
| const classFacts = [ |
| { |
| value: "41 min", |
| label: "full chapter class", |
| detail: "Sound Waves taught end to end: concept, formula, numericals, exam answers, revision.", |
| }, |
| { |
| value: "11 steps", |
| label: "every single class", |
| detail: "Session plan through teach, board, practice, correction, quiz, and revision.", |
| }, |
| { |
| value: "Board answers", |
| label: "exam keywords", |
| detail: "2-mark and 5-mark answers with the scoring words examiners look for.", |
| }, |
| { |
| value: "Honest beta", |
| label: "one chapter ready", |
| detail: "Sound Waves is complete. The rest of Physics is marked clearly as next.", |
| }, |
| ]; |
|
|
| const teachingFrames = [ |
| { |
| src: "/demo/board/02-concept.jpg", |
| alt: "DocDoe board teaching longitudinal wave concept", |
| caption: "Concepts labelled for understanding, not scrolling.", |
| tag: "Concept", |
| }, |
| { |
| src: "/demo/board/03-formula.jpg", |
| alt: "DocDoe board showing wave formula derivation", |
| caption: "Formulas appear with the derivation path, not only the final line.", |
| tag: "Formula", |
| }, |
| { |
| src: "/demo/board/04-mistakes.jpg", |
| alt: "DocDoe board calling out common exam mistakes", |
| caption: "Common mistakes called out before the exam, not after.", |
| tag: "Mistakes", |
| }, |
| { |
| src: "/demo/board/05-exam-answer.jpg", |
| alt: "DocDoe board-style exam answer with scoring keywords", |
| caption: "Board-style answers with the exact scoring keywords.", |
| tag: "Exam answer", |
| }, |
| { |
| src: "/demo/board/06-practice.jpg", |
| alt: "DocDoe practice question board frame", |
| caption: "You attempt first. The answer comes after thinking time.", |
| tag: "Practice", |
| }, |
| { |
| src: "/demo/board/07-revision.jpg", |
| alt: "DocDoe revision recap board frame", |
| caption: "Revision is saved so tomorrow continues from tonight.", |
| tag: "Revision", |
| }, |
| ]; |
|
|
| export function RealClassProof() { |
| const reduceMotion = Boolean(useReducedMotion()); |
|
|
| return ( |
| <section |
| id="real-class" |
| className="relative isolate overflow-hidden px-5 py-24 font-sans sm:px-8 sm:py-32" |
| aria-label="Real DocDoe board frames from class" |
| > |
| <div className="relative z-10 mx-auto w-full max-w-[1180px]"> |
| <motion.div |
| initial={reduceMotion ? false : "hidden"} |
| whileInView="visible" |
| viewport={{ once: true, amount: 0.2 }} |
| className="grid gap-8 lg:grid-cols-[1fr_auto] lg:items-end" |
| > |
| <div className="max-w-[720px]"> |
| <motion.p |
| className="text-[11px] font-semibold uppercase tracking-[0.2em] text-white/45" |
| variants={reduceMotion ? undefined : reveal} |
| > |
| Proof, not promises |
| </motion.p> |
| <motion.h2 |
| className="font-display mt-4 text-balance text-[clamp(2.15rem,5.2vw,3.4rem)] font-semibold leading-[1.02] tracking-[-0.04em] text-[#F2F4F1]" |
| variants={reduceMotion ? undefined : reveal} |
| custom={1} |
| > |
| This is the board students study from. |
| </motion.h2> |
| <motion.p |
| className="mt-5 max-w-[54ch] text-base font-normal leading-relaxed text-[rgba(242,244,241,0.58)] sm:text-[17px]" |
| variants={reduceMotion ? undefined : reveal} |
| custom={2} |
| > |
| Frames from the real Sound Waves class render. Same teaching engine |
| that runs inside tuition. No stock photos. No fake studio footage. |
| </motion.p> |
| </div> |
| <motion.p |
| className="max-w-[220px] text-right text-[12px] leading-relaxed text-white/35 lg:pb-1" |
| variants={reduceMotion ? undefined : reveal} |
| custom={3} |
| > |
| Kerala SSLC Class 10 Physics |
| <br /> |
| Rendered by DocDoe |
| </motion.p> |
| </motion.div> |
| |
| {/* Featured frame */} |
| <motion.figure |
| className="mt-12" |
| initial={reduceMotion ? false : "hidden"} |
| whileInView="visible" |
| viewport={{ once: true, amount: 0.15 }} |
| variants={reduceMotion ? undefined : reveal} |
| custom={1} |
| > |
| <div className="docdoe-board-stage"> |
| <div className="docdoe-board-stage-chrome"> |
| <div className="flex items-center gap-2"> |
| <span className="docdoe-board-live-dot" aria-hidden="true" /> |
| <span className="text-[10px] font-semibold uppercase tracking-[0.18em] text-white/55"> |
| Real class board |
| </span> |
| </div> |
| <span className="text-[10px] font-medium uppercase tracking-[0.14em] text-white/30"> |
| Sound Waves · concept |
| </span> |
| </div> |
| <div className="docdoe-board-frame relative aspect-video overflow-hidden bg-[#0B0F0E]"> |
| <Image |
| src="/demo/board/hero-frame.jpg" |
| alt="DocDoe class board teaching Sound Waves with longitudinal wave diagram" |
| fill |
| className="object-cover" |
| sizes="(min-width: 1180px) 1180px, 100vw" |
| priority |
| /> |
| </div> |
| <figcaption className="docdoe-board-stage-caption"> |
| <div className="min-w-0"> |
| <p className="text-sm font-semibold text-white/80"> |
| Longitudinal waves · understanding label on the board |
| </p> |
| <p className="mt-0.5 text-xs text-white/40"> |
| From the current Physics course render, not a marketing edit |
| </p> |
| </div> |
| </figcaption> |
| </div> |
| </motion.figure> |
| |
| <motion.dl |
| className="mt-14 grid grid-cols-1 gap-x-8 gap-y-8 border-t border-white/10 pt-10 sm:grid-cols-2 lg:grid-cols-4" |
| initial={reduceMotion ? false : "hidden"} |
| whileInView="visible" |
| viewport={{ once: true, amount: 0.2 }} |
| aria-label="Facts from the DocDoe teaching engine" |
| > |
| {classFacts.map((fact, i) => ( |
| <motion.div key={fact.label} variants={reduceMotion ? undefined : reveal} custom={i}> |
| <dt className="sr-only">{fact.label}</dt> |
| <dd> |
| <p className="font-display text-2xl font-semibold tracking-tight text-white sm:text-3xl"> |
| {fact.value} |
| </p> |
| <p className="mt-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-white/50"> |
| {fact.label} |
| </p> |
| <p className="mt-2.5 text-sm font-normal leading-relaxed text-white/45"> |
| {fact.detail} |
| </p> |
| </dd> |
| </motion.div> |
| ))} |
| </motion.dl> |
| |
| <motion.div |
| className="mt-16" |
| initial={reduceMotion ? false : "hidden"} |
| whileInView="visible" |
| viewport={{ once: true, amount: 0.12 }} |
| > |
| <motion.h3 |
| className="font-display text-xl font-semibold tracking-tight text-white sm:text-2xl" |
| variants={reduceMotion ? undefined : reveal} |
| > |
| Six moments from the same class |
| </motion.h3> |
| <div className="mt-8 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"> |
| {teachingFrames.map((frame, i) => ( |
| <motion.figure |
| key={frame.src} |
| className="group" |
| variants={reduceMotion ? undefined : reveal} |
| custom={i} |
| > |
| <div className="overflow-hidden rounded-xl border border-white/10 bg-[#0B0F0E] transition-[border-color] duration-200 group-hover:border-white/20"> |
| <div className="relative aspect-video"> |
| <Image |
| src={frame.src} |
| alt={frame.alt} |
| fill |
| className="object-cover" |
| sizes="(min-width: 1024px) 360px, (min-width: 640px) 50vw, 100vw" |
| /> |
| </div> |
| </div> |
| <figcaption className="mt-3"> |
| <span className="text-[10px] font-semibold uppercase tracking-[0.16em] text-white/35"> |
| {frame.tag} |
| </span> |
| <p className="mt-1 text-sm font-normal leading-relaxed text-white/55"> |
| {frame.caption} |
| </p> |
| </figcaption> |
| </motion.figure> |
| ))} |
| </div> |
| </motion.div> |
| </div> |
| </section> |
| ); |
| } |
|
|
