From a688c3b019f37b0884c9dd8234b5d29c434a73ca Mon Sep 17 00:00:00 2001
From: John Jeong <jeeheontransformers@gmail.com>
Date: Tue, 2 Dec 2025 15:57:31 +0900
Subject: [PATCH 1/2] style(css): add scroll margin for id elements

---
 apps/web/src/styles.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index bfdbed8f1e..e92bc1f7b9 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -10,6 +10,12 @@
   --breakpoint-laptop: 72rem;
 }
 
+@layer base {
+  [id] {
+    scroll-margin-top: 69px;
+  }
+}
+
 @layer utilities {
   @keyframes shake {
     0%,

From b79371e23faa153150d96cd021f30a744c084ecc Mon Sep 17 00:00:00 2001
From: John Jeong <jeeheontransformers@gmail.com>
Date: Tue, 2 Dec 2025 15:57:48 +0900
Subject: [PATCH 2/2] refactor(ui): simplify section anchor handling

---
 apps/web/src/routes/_view/index.tsx           |  9 ++---
 .../src/routes/_view/product/ai-assistant.tsx | 18 ++-------
 .../routes/_view/product/ai-notetaking.tsx    | 37 ++++---------------
 .../src/routes/_view/product/mini-apps.tsx    | 30 +++------------
 4 files changed, 19 insertions(+), 75 deletions(-)

diff --git a/apps/web/src/routes/_view/index.tsx b/apps/web/src/routes/_view/index.tsx
index 513886b78a..1b24368f99 100644
--- a/apps/web/src/routes/_view/index.tsx
+++ b/apps/web/src/routes/_view/index.tsx
@@ -289,11 +289,10 @@ function HeroSection({
   return (
     <div className="bg-linear-to-b from-stone-50/30 to-stone-100/30">
       <div className="flex flex-col items-center text-center">
-        <section className="relative flex flex-col items-center text-center gap-12 py-24 px-4 laptop:px-0">
-          <div
-            id="hero"
-            className="absolute top-[-69px] h-[69px] pointer-events-none"
-          />
+        <section
+          id="hero"
+          className="flex flex-col items-center text-center gap-12 py-24 px-4 laptop:px-0"
+        >
           <div className="space-y-6 max-w-4xl">
             <h1 className="text-4xl sm:text-5xl font-serif tracking-tight text-stone-600">
               The AI notepad for <br className="block sm:hidden" />
diff --git a/apps/web/src/routes/_view/product/ai-assistant.tsx b/apps/web/src/routes/_view/product/ai-assistant.tsx
index 7a518327ec..6009989e9d 100644
--- a/apps/web/src/routes/_view/product/ai-assistant.tsx
+++ b/apps/web/src/routes/_view/product/ai-assistant.tsx
@@ -75,11 +75,7 @@ function HeroSection() {
 
 function BeforeMeetingSection() {
   return (
-    <section className="relative">
-      <div
-        id="before-meeting"
-        className="absolute top-[-69px] h-[69px] pointer-events-none"
-      />
+    <section id="before-meeting">
       <div className="text-center font-medium text-neutral-600 uppercase tracking-wide py-6 font-serif">
         Before meetings
       </div>
@@ -193,11 +189,7 @@ function BeforeMeetingSection() {
 
 function DuringMeetingSection() {
   return (
-    <section className="relative">
-      <div
-        id="during-meeting"
-        className="absolute top-[-69px] h-[69px] pointer-events-none"
-      />
+    <section id="during-meeting">
       <div className="text-center font-medium text-neutral-600 uppercase tracking-wide py-6 font-serif">
         During meetings
       </div>
@@ -303,11 +295,7 @@ function DuringMeetingSection() {
 
 function AfterMeetingSection() {
   return (
-    <section className="relative">
-      <div
-        id="after-meeting"
-        className="absolute top-[-69px] h-[69px] pointer-events-none"
-      />
+    <section id="after-meeting">
       <div className="text-center font-medium text-neutral-600 uppercase tracking-wide py-6 font-serif">
         After meetings
       </div>
diff --git a/apps/web/src/routes/_view/product/ai-notetaking.tsx b/apps/web/src/routes/_view/product/ai-notetaking.tsx
index 2d1184ab2a..861116001b 100644
--- a/apps/web/src/routes/_view/product/ai-notetaking.tsx
+++ b/apps/web/src/routes/_view/product/ai-notetaking.tsx
@@ -185,11 +185,7 @@ function HeroSection() {
 
 function EditorSection() {
   return (
-    <section className="bg-stone-50/30 relative">
-      <div
-        id="editor"
-        className="absolute top-[-69px] h-[69px] pointer-events-none"
-      />
+    <section id="editor" className="bg-stone-50/30">
       <div className="hidden sm:grid sm:grid-cols-2">
         <div className="flex items-center p-8">
           <div className="flex flex-col gap-4">
@@ -667,11 +663,7 @@ function AnimatedMarkdownDemo({ isMobile = false }: { isMobile?: boolean }) {
 
 function TranscriptionSection() {
   return (
-    <section className="border-y border-neutral-100 relative">
-      <div
-        id="transcription"
-        className="absolute top-[-69px] h-[69px] pointer-events-none"
-      />
+    <section id="transcription" className="border-y border-neutral-100">
       <div className="text-center py-12 px-4 lg:px-0">
         <h2 className="text-3xl font-serif text-stone-600 mb-4">
           Transcription
@@ -840,11 +832,7 @@ function SummariesSection() {
   }, []);
 
   return (
-    <section className="relative">
-      <div
-        id="summaries"
-        className="absolute top-[-69px] h-[69px] pointer-events-none"
-      />
+    <section id="summaries">
       <div className="text-center py-12 px-4 lg:px-0">
         <h2 className="text-3xl font-serif text-stone-600 mb-4">
           AI summaries
@@ -1108,15 +1096,12 @@ function SearchSection() {
 
   return (
     <section
-      className="bg-stone-50/30 bg-cover bg-center relative"
+      id="search"
+      className="bg-stone-50/30 bg-cover bg-center"
       style={{
         backgroundImage: "url(/api/images/texture/bg-stars.jpg)",
       }}
     >
-      <div
-        id="search"
-        className="absolute top-[-69px] h-[69px] pointer-events-none"
-      />
       <div className="py-20 px-6">
         <div className="text-center space-y-12">
           <div>
@@ -1952,11 +1937,7 @@ TrackProtectCell.displayName = "TrackProtectCell";
 
 function SharingSection() {
   return (
-    <section className="relative">
-      <div
-        id="sharing"
-        className="absolute top-[-69px] h-[69px] pointer-events-none"
-      />
+    <section id="sharing">
       <div className="text-center py-12 px-4 lg:px-0">
         <div className="inline-block px-4 py-1.5 bg-linear-to-t from-neutral-200 to-neutral-100 text-neutral-900 rounded-full shadow-sm text-xs font-medium mb-4">
           Coming Soon
@@ -2180,11 +2161,7 @@ const AUTO_ADVANCE_DURATION = 5000;
 
 function FloatingPanelSection() {
   return (
-    <section className="border-y border-neutral-100 relative">
-      <div
-        id="floating-panel"
-        className="absolute top-[-69px] h-[69px] pointer-events-none"
-      />
+    <section id="floating-panel" className="border-y border-neutral-100">
       <FloatingPanelHeader />
       <FloatingPanelContent />
     </section>
diff --git a/apps/web/src/routes/_view/product/mini-apps.tsx b/apps/web/src/routes/_view/product/mini-apps.tsx
index fbc5361ac5..2a8a8ac483 100644
--- a/apps/web/src/routes/_view/product/mini-apps.tsx
+++ b/apps/web/src/routes/_view/product/mini-apps.tsx
@@ -75,11 +75,7 @@ function HeroSection() {
 
 function ContactsSection() {
   return (
-    <section className="bg-stone-50/30 relative">
-      <div
-        id="contacts"
-        className="absolute top-[-69px] h-[69px] pointer-events-none"
-      />
+    <section id="contacts" className="bg-stone-50/30">
       <div className="hidden sm:grid sm:grid-cols-2">
         <div className="flex items-center p-8">
           <div className="flex flex-col gap-4">
@@ -255,11 +251,7 @@ function ContactsSection() {
 
 function CalendarSection() {
   return (
-    <section className="bg-stone-50/30 relative">
-      <div
-        id="calendar"
-        className="absolute top-[-69px] h-[69px] pointer-events-none"
-      />
+    <section id="calendar" className="bg-stone-50/30">
       <div className="hidden sm:grid sm:grid-cols-2">
         <div className="flex items-center p-8">
           <div className="flex flex-col gap-4">
@@ -419,11 +411,7 @@ function CalendarSection() {
 
 function DailyNotesSection() {
   return (
-    <section className="bg-stone-50/30 relative">
-      <div
-        id="daily-notes"
-        className="absolute top-[-69px] h-[69px] pointer-events-none"
-      />
+    <section id="daily-notes" className="bg-stone-50/30">
       <div className="hidden sm:grid sm:grid-cols-2">
         <div className="flex items-center p-8">
           <div className="flex flex-col gap-4">
@@ -521,11 +509,7 @@ function DailyNotesSection() {
 
 function NoteshelfSection() {
   return (
-    <section className="bg-stone-50/30 relative">
-      <div
-        id="noteshelf"
-        className="absolute top-[-69px] h-[69px] pointer-events-none"
-      />
+    <section id="noteshelf" className="bg-stone-50/30">
       <div className="hidden sm:grid sm:grid-cols-2">
         <div className="flex items-center p-8">
           <div className="flex flex-col gap-4">
@@ -643,11 +627,7 @@ function AdvancedSearchSection() {
   ];
 
   return (
-    <section className="bg-stone-50/30 relative">
-      <div
-        id="advanced-search"
-        className="absolute top-[-69px] h-[69px] pointer-events-none"
-      />
+    <section id="advanced-search" className="bg-stone-50/30">
       <div>
         <div className="text-center">
           <div className="py-12 px-6">