Also need to check Hero.tsx to confirm PhoneFrame and KakaoNotifCard exports:
Framer Motion is not in package.json, so I'll install it and rewrite PhoneDemoSection.tsx using framer-motion's AnimatePresence + motion.div + useInView.
Now rewrite PhoneDemoSection.tsx with the full Framer Motion implementation:
The section has been fully rebuilt with Framer Motion. Here's what changed:
grid-cols-2; the left column stacks 4 StepBlock components each with min-h-[60vh], and the right StickyPhone column is pinned via position: sticky; top: calc(50vh - 280px). An IntersectionObserver with threshold: 0.4 watches each left block and updates activeStep state.KakaoNotifCard inside the phone is wrapped in <AnimatePresence mode="wait"> with a motion.div keyed by activeStep, animating from opacity: 0, y: 10 to opacity: 1, y: 0 (and exiting to opacity: 0, y: -10) over 0.3s.opacity: 0.35 and shift left by 4px; the active step shows full opacity with a 2px cyan left border; the tag pill background and color also transition between states.MobileSteps renders each step's text followed immediately by its phone mockup, with no sticky behavior, hidden on md and above.The code returns the following error:
⨯ ./app/globals.css:5200:8
Parsing CSS source code failed
5198 | initial-value: 0;
5199 | }
> 5200 | @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
| ^
5201 | :root {
5202 | --brand-cyan: #5EC6D4;
5203 | --brand-cyan-dark: #4AB8C7;
@import rules must precede all rules aside from @charset and @layer statements
Import trace:
Client Component Browser:
./app/globals.css [Client Component Browser]
./app/layout.tsx [Server Component]
Revise the code to address the error.
The file looks correct here — all three @import statements are at the top. The error says line 5200, which means the bundler is seeing a concatenated version of the CSS where tw-animate-css injects many rules before our @import url(...). The fix is to load Pretendard via next/font in layout.tsx instead of a CSS @import, which eliminates the ordering constraint entirely.
Now remove the @import url(...) from globals.css and point --font-sans at the CSS variable instead:
Now add pretendard as an npm dependency so next/font/local can resolve the woff2 file:
Now update layout.tsx to use next/font/local pointing at the installed npm package path, which is resolved at build time and avoids any CSS @import entirely:
The single-weight localFont approach won't render Korean well across all weights. Better to use the variable font file (which includes all weights) and declare each weight explicitly. Also, next/font/local with a node_modules path can be unreliable — the safest approach is to load multiple weights from the pretendard package:
pretendard is now added to package.json as an npm dependency, and layout.tsx loads five woff2 weights (400–800) via next/font/local pointing at the installed package path. This completely removes the CSS @import url(...) — which was the root cause of the parse error — since next/font injects the @font-face declarations at build time before any stylesheet rules.
You can send messages while the preview loads