refactor(ui): simplify section anchor handling

Author: ComputelessComputer

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" />

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>

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>

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">