Add anchor points, audio upload, feature links, and changelog SEO metadata

apps/web/src/components/github-open-source.tsx

@@ -255,7 +255,7 @@ function OpenSourceButton({
       <h2 className="text-2xl font-serif text-stone-600">Open source</h2>
       <p className="text-neutral-600">
         {
-          "Hyprnote values privacy and community, so it's been transparent from day one"
+          "Hyprnote values privacy and community, so it's been transparent from day one."
         }
       </p>
       <a

apps/web/src/routes/_view/changelog/$slug.tsx

@@ -56,6 +56,39 @@ export const Route = createFileRoute("/_view/changelog/$slug")({
       diffUrl,
     };
   },
+  head: ({ loaderData }) => {
+    if (!loaderData) return {};
+
+    const { changelog } = loaderData;
+    const currentVersion = semver.parse(changelog.version);
+    const isNightly = currentVersion && currentVersion.prerelease.length > 0;
+
+    const title = `Hyprnote Changelog - Version ${changelog.version}`;
+    const description = `Explore what's new in Hyprnote version ${changelog.version}${isNightly ? " (Nightly)" : ""}.`;
+    const url = `https://hyprnote.com/changelog/${changelog.slug}`;
+    const ogImageUrl = `https://hyprnote.com/og?type=changelog&version=${encodeURIComponent(changelog.version)}&isNightly=${isNightly}`;
+
+    return {
+      meta: [
+        { title },
+        { name: "description", content: description },
+        { property: "og:type", content: "article" },
+        { property: "og:title", content: title },
+        { property: "og:description", content: description },
+        { property: "og:url", content: url },
+        { property: "og:image", content: ogImageUrl },
+        { property: "og:image:width", content: "1200" },
+        { property: "og:image:height", content: "630" },
+        { name: "twitter:card", content: "summary_large_image" },
+        { name: "twitter:site", content: "@tryhyprnote" },
+        { name: "twitter:creator", content: "@tryhyprnote" },
+        { name: "twitter:title", content: title },
+        { name: "twitter:description", content: description },
+        { name: "twitter:url", content: url },
+        { name: "twitter:image", content: ogImageUrl },
+      ],
+    };
+  },
 });
 
 function Component() {

apps/web/src/routes/_view/index.tsx

@@ -77,26 +77,29 @@ const detailsFeatures = [
       "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/hyprnote/editor.jpg",
     link: "/product/ai-notetaking#editor",
   },
+  {
+    icon: "mdi:upload-outline",
+    title: "Upload Audio",
+    description: "Import audio files or transcripts to convert into notes",
+    image:
+      "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/hyprnote/upload-audio.jpg",
+    link: "/product/ai-notetaking#transcription",
+  },
   {
     icon: "mdi:account-multiple-outline",
     title: "Contacts",
     description: "Organize and manage your contacts with ease",
     image:
       "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/hyprnote/contacts.jpg",
+    link: "/product/mini-apps#contacts",
   },
   {
     icon: "mdi:calendar-outline",
     title: "Calendar",
     description: "Stay on top of your schedule with integrated calendar",
     image:
       "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/hyprnote/calendar.jpg",
-  },
-  {
-    icon: "mdi:upload-outline",
-    title: "Upload Audio",
-    description: "Import audio files or transcripts to convert into notes",
-    comingSoon: true,
-    link: "/product/ai-notetaking#upload",
+    link: "/product/mini-apps#calendar",
   },
   {
     icon: "mdi:bookshelf",

apps/web/src/routes/_view/product/mini-apps.tsx

@@ -75,7 +75,11 @@ function HeroSection() {
 
 function ContactsSection() {
   return (
-    <section className="bg-stone-50/30">
+    <section className="bg-stone-50/30 relative">
+      <div
+        id="contacts"
+        className="absolute top-[-69px] h-[69px] pointer-events-none"
+      />
       <div className="hidden sm:grid sm:grid-cols-2">
         <div className="flex items-center p-8">
           <div className="flex flex-col gap-4">
@@ -251,7 +255,11 @@ function ContactsSection() {
 
 function CalendarSection() {
   return (
-    <section className="bg-stone-50/30">
+    <section className="bg-stone-50/30 relative">
+      <div
+        id="calendar"
+        className="absolute top-[-69px] h-[69px] pointer-events-none"
+      />
       <div className="hidden sm:grid sm:grid-cols-2">
         <div className="flex items-center p-8">
           <div className="flex flex-col gap-4">
@@ -411,7 +419,11 @@ function CalendarSection() {
 
 function DailyNotesSection() {
   return (
-    <section className="bg-stone-50/30">
+    <section className="bg-stone-50/30 relative">
+      <div
+        id="daily-notes"
+        className="absolute top-[-69px] h-[69px] pointer-events-none"
+      />
       <div className="hidden sm:grid sm:grid-cols-2">
         <div className="flex items-center p-8">
           <div className="flex flex-col gap-4">
@@ -509,7 +521,11 @@ function DailyNotesSection() {
 
 function NoteshelfSection() {
   return (
-    <section className="bg-stone-50/30">
+    <section className="bg-stone-50/30 relative">
+      <div
+        id="noteshelf"
+        className="absolute top-[-69px] h-[69px] pointer-events-none"
+      />
       <div className="hidden sm:grid sm:grid-cols-2">
         <div className="flex items-center p-8">
           <div className="flex flex-col gap-4">