ui changes

apps/web/src/components/image.tsx

@@ -1,12 +1,24 @@
 import type { ImageProps } from "@unpic/react";
 import { Image as UnpicImage } from "@unpic/react/base";
-import { transform } from "unpic/providers/netlify";
 
 export const Image = ({
   layout = "constrained",
+  background,
+  objectFit,
   ...props
-}: Partial<ImageProps> & Pick<ImageProps, "src" | "alt">) => {
+}: Partial<ImageProps> &
+  Pick<ImageProps, "src" | "alt"> & {
+    objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
+  }) => {
   return (
-    <UnpicImage {...(props as any)} layout={layout} transformer={transform} />
+    <UnpicImage
+      {...(props as any)}
+      layout={layout}
+      background={background}
+      style={{
+        objectFit: objectFit,
+        ...((props as any).style || {}),
+      }}
+    />
   );
 };

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

@@ -10,6 +10,7 @@ import {
 } from "@hypr/ui/components/ui/resizable";
 import { cn } from "@hypr/utils";
 
+import { Image } from "@/components/image";
 import { MockWindow } from "@/components/mock-window";
 
 export const Route = createFileRoute("/_view/about")({
@@ -228,7 +229,7 @@ function OurStoryGrid({
           className="group flex flex-col items-center text-center p-4 rounded-lg hover:bg-stone-50 transition-colors cursor-pointer h-fit"
         >
           <div className="mb-3 w-16 h-16 flex items-center justify-center">
-            <img
+            <Image
               src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/icons/textedit.webp"
               alt="Our Story"
               width={64}
@@ -266,7 +267,7 @@ function FoundersGrid({
             className="group flex flex-col items-center text-center p-4 rounded-lg hover:bg-stone-50 transition-colors cursor-pointer h-fit"
           >
             <div className="mb-3 w-16 h-16">
-              <img
+              <Image
                 src={founder.image}
                 alt={founder.name}
                 width={64}
@@ -300,7 +301,7 @@ function TeamPhotosGrid({
             className="group flex flex-col items-center text-center p-4 rounded-lg hover:bg-stone-50 transition-colors cursor-pointer h-fit"
           >
             <div className="mb-3 w-16 h-16">
-              <img
+              <Image
                 src={photo.url}
                 alt={photo.name}
                 width={64}
@@ -389,7 +390,7 @@ function OurStorySidebar({
         ])}
       >
         <div className="w-12 h-12 shrink-0 flex items-center justify-center">
-          <img
+          <Image
             src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/icons/textedit.webp"
             alt="Our Story"
             width={48}
@@ -438,7 +439,7 @@ function FoundersSidebar({
             ])}
           >
             <div className="w-12 h-12 shrink-0 rounded-full overflow-hidden border-2 border-neutral-200">
-              <img
+              <Image
                 src={founder.image}
                 alt={founder.name}
                 width={48}
@@ -492,7 +493,7 @@ function TeamPhotosSidebar({
             ])}
           >
             <div className="w-12 h-12 shrink-0 rounded-lg overflow-hidden border border-neutral-200">
-              <img
+              <Image
                 src={photo.url}
                 alt={photo.name}
                 width={48}
@@ -619,11 +620,31 @@ function StoryDetail({ onClose }: { onClose: () => void }) {
             attend meetings on autopilot.
           </p>
 
-          <p className="text-base text-neutral-600 leading-relaxed mb-8">
+          <p className="text-base text-neutral-600 leading-relaxed mb-2">
             This is how we got here: a messy start, a full rewrite, and a clear
             belief that great work comes from humans — not from machines
             pretending to be in the room.
           </p>
+
+          <div className="space-y-2">
+            <div>
+              <p className="text-base text-neutral-600 font-medium italic font-serif">
+                Hyprnote
+              </p>
+              <p className="text-sm text-neutral-500">John Jeong, Yujong Lee</p>
+            </div>
+
+            <div>
+              <Image
+                src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/hyprnote/signature-dark.svg"
+                alt="Hyprnote Signature"
+                width={124}
+                height={60}
+                layout="constrained"
+                className="opacity-80 object-contain"
+              />
+            </div>
+          </div>
         </div>
       </div>
     </>
@@ -662,7 +683,7 @@ function FounderDetail({
 
       <div className="p-4 overflow-y-auto">
         <div className="flex justify-center mb-6">
-          <img
+          <Image
             src={founder.image}
             alt={founder.name}
             width={200}
@@ -767,7 +788,7 @@ function PhotoDetail({
       </div>
 
       <div className="p-4 overflow-y-auto">
-        <img
+        <Image
           src={photo.url}
           alt={photo.name}
           className="w-full object-cover mb-6 rounded-lg"

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

@@ -153,7 +153,7 @@ function groupVersions(changelogs: ChangelogWithMeta[]): VersionGroup[] {
   return Array.from(groups.entries())
     .map(([baseVersion, versions]) => ({
       baseVersion,
-      versions,
+      versions: versions.sort((a, b) => semver.rcompare(a.version, b.version)),
     }))
     .sort((a, b) => semver.rcompare(a.baseVersion, b.baseVersion));
 }

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

@@ -176,7 +176,7 @@ function FAQSection() {
   return (
     <section className="py-16 px-4 laptop:px-0">
       <div className="max-w-3xl mx-auto">
-        <h2 className="text-3xl font-serif text-stone-600 mb-8 text-center">
+        <h2 className="text-3xl font-serif text-stone-600 mb-16 text-center">
           Frequently Asked Questions
         </h2>
         <div className="space-y-6">
@@ -210,9 +210,11 @@ function CTASection() {
             className="size-36 mx-auto rounded-[40px] border border-neutral-100"
           />
         </div>
-        <h2 className="text-2xl sm:text-3xl font-serif">Need a team plan?</h2>
+        <h2 className="text-2xl sm:text-3xl font-serif">
+          Need something else?
+        </h2>
         <p className="text-lg text-neutral-600 max-w-2xl mx-auto">
-          Book a call to discuss custom team pricing and enterprise solutions
+          Book a call to discuss custom solutions for your specific needs
         </p>
         <div className="pt-6">
           <Link

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

@@ -686,7 +686,7 @@ function CoolStuffSection() {
             </p>
           </div>
           <div className="flex-1 flex items-center justify-center overflow-hidden">
-            <img
+            <Image
               src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/hyprnote/no-bots.png"
               alt="No bots interface"
               className="w-full h-full object-contain"
@@ -706,7 +706,7 @@ function CoolStuffSection() {
             </p>
           </div>
           <div className="flex-1 flex items-center justify-center overflow-hidden">
-            <img
+            <Image
               src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/hyprnote/no-wifi.png"
               alt="No internet interface"
               className="w-full h-full object-contain"
@@ -730,8 +730,8 @@ function CoolStuffSection() {
             </p>
           </div>
           <div className="overflow-hidden">
-            <img
-              src="/hyprnote/no-bots.png"
+            <Image
+              src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/hyprnote/no-bots.png"
               alt="No bots interface"
               className="w-full h-auto object-contain"
             />
@@ -749,7 +749,7 @@ function CoolStuffSection() {
           </div>
           <div className="overflow-hidden">
             <Image
-              src="/hyprnote/no-wifi.png"
+              src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/hyprnote/no-wifi.png"
               alt="No internet interface"
               className="w-full h-auto object-contain"
             />
@@ -1429,7 +1429,7 @@ function DetailsTabletView({
                 key={index}
                 onClick={() => setSelectedDetail(index)}
                 className={cn([
-                  "p-6 border-r border-neutral-100 last:border-r-0 min-w-[280px] text-left transition-colors",
+                  "cursor-pointer p-6 border-r border-neutral-100 last:border-r-0 min-w-[280px] text-left transition-colors",
                   selectedDetail === index
                     ? "bg-stone-50"
                     : "hover:bg-neutral-50",

apps/web/src/routes/_view/product/ai-notetaking.tsx

@@ -36,7 +36,7 @@ export const Route = createFileRoute("/_view/product/ai-notetaking")({
 function Component() {
   return (
     <div
-      className="bg-linear-to-b from-white via-stone-50/20 to-white min-h-screen"
+      className="bg-linear-to-b from-white via-stone-50/20 to-white min-h-screen overflow-x-hidden"
       style={{ backgroundImage: "url(/patterns/dots.svg)" }}
     >
       <div className="max-w-6xl mx-auto border-x border-neutral-100 bg-white">
@@ -623,7 +623,7 @@ function TranscriptionSection() {
             </div>
             <div className="overflow-hidden bg-neutral-100">
               <img
-                src="https://via.placeholder.com/600x400/e5e5e5/a3a3a3?text=On-Device+Transcription"
+                src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/hyprnote/no-wifi.png"
                 alt="On-device transcription"
                 className="w-full h-auto object-contain"
               />

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

@@ -43,7 +43,7 @@ function Component() {
         setOnTrigger: (callback) => setOnTrigger(() => callback),
       }}
     >
-      <div className="min-h-screen flex flex-col overflow-x-hidden">
+      <div className="min-h-screen flex flex-col">
         <Header />
         <main className="flex-1">
           <Outlet />
@@ -456,13 +456,12 @@ function Footer() {
               </h3>
               <ul className="space-y-3">
                 <li>
-                  <a
-                    href="/download/apple-silicon"
-                    download
+                  <Link
+                    to="/download"
                     className="text-sm text-neutral-600 hover:text-stone-600 transition-colors"
                   >
                     Download
-                  </a>
+                  </Link>
                 </li>
                 <li>
                   <Link

apps/web/src/routes/auth.tsx

@@ -80,11 +80,11 @@ function PrivacyPolicy() {
   return (
     <p className="text-xs text-neutral-500 mt-4 text-left">
       By signing up, you agree to Hyprnote's{" "}
-      <a href="/terms" className="underline hover:text-neutral-700">
+      <a href="/legal/terms" className="underline hover:text-neutral-700">
         Terms of Service
       </a>{" "}
       and{" "}
-      <a href="/privacy" className="underline hover:text-neutral-700">
+      <a href="/legal/privacy" className="underline hover:text-neutral-700">
         Privacy Policy
       </a>
       .
@@ -225,7 +225,7 @@ function OAuthButton({
       onClick={() => oauthMutation.mutate(provider)}
       disabled={oauthMutation.isPending}
       className={cn([
-        "w-full px-4 py-2",
+        "w-full px-4 py-2 cursor-pointer",
         "border border-neutral-300",
         "rounded-lg font-medium text-neutral-700",
         "hover:bg-neutral-50",