c48a11b13c
- Hero auto-rotates story backdrops every 5 seconds with 500ms fade transitions - ProductShowcase cards rotate with mint ring highlight on the active card - Inactive cards fade to 60% opacity on mobile, full opacity on desktop - New components: StoryBackdrop, StoryOnboarding, CountUp, lib/stories - Manual Another-story control still works Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { RefreshCcw } from "lucide-react";
|
|
import { StoryBackdrop } from "@/components/marketing/StoryBackdrop";
|
|
import { randomStory, type GoalStory } from "@/lib/stories";
|
|
|
|
/**
|
|
* Mobile onboarding screen with a rotating goal-story video background.
|
|
* A different human moment greets the user every time the app opens.
|
|
*/
|
|
export function StoryOnboarding() {
|
|
const [story, setStory] = useState<GoalStory | null>(null);
|
|
useEffect(() => setStory(randomStory()), []);
|
|
|
|
return (
|
|
<div className="relative -m-5 h-[calc(100%+40px)] overflow-hidden">
|
|
{story ? (
|
|
<StoryBackdrop story={story} dim="soft" />
|
|
) : (
|
|
<div className="absolute inset-0 bg-gradient-to-br from-[#0A5240] to-[#0F6E56]" />
|
|
)}
|
|
<div className="relative flex h-full flex-col justify-end p-5 pb-12">
|
|
{story && (
|
|
<>
|
|
<p className="text-[11px] font-bold uppercase tracking-wider text-mint">
|
|
{story.emoji} {story.tag}
|
|
</p>
|
|
<h2 className="mt-2 font-display text-3xl leading-tight text-paper">{story.headline}</h2>
|
|
<p className="mt-2 text-sm leading-6 text-paper/75">{story.subline}</p>
|
|
</>
|
|
)}
|
|
<p className="mt-4 text-xs font-semibold text-paper/60">
|
|
Your goal is next. Aartha gets you there.
|
|
</p>
|
|
<button className="mt-4 rounded-lg bg-mint py-3 font-bold text-ink">Get started</button>
|
|
<button
|
|
onClick={() => setStory((s) => randomStory(s?.id))}
|
|
className="mt-3 inline-flex items-center justify-center gap-1.5 text-xs font-semibold text-paper/60"
|
|
>
|
|
<RefreshCcw size={12} /> See another story
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|