feat(web): Improve GitHub stats and add slash separators

Implement dynamic GitHub repository stats fetching using React
Query and replace hardcoded values. Extract slash separator
pattern into a reusable component to clean up section
transitions across the landing page.

Author: ComputelessComputer

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

@@ -1,6 +1,7 @@
 import { cn } from "@hypr/utils";
 
 import { Icon } from "@iconify-icon/react";
+import { useQuery } from "@tanstack/react-query";
 
 const ORG_REPO = "fastrepl/hyprnote";
 
@@ -136,15 +137,26 @@ function GridRow({
 }
 
 export function GitHubOpenSource() {
-  const STARS_COUNT = 6419;
-  const FORKS_COUNT = 396;
+  const LAST_SEEN_STARS = 6419;
+  const LAST_SEEN_FORKS = 396;
+
+  const githubStats = useQuery({
+    queryKey: ["github-stats"],
+    queryFn: async () => {
+      const response = await fetch(`https://api.github.com/repos/${ORG_REPO}`);
+      const data = await response.json();
+      return {
+        stars: data.stargazers_count ?? LAST_SEEN_STARS,
+        forks: data.forks_count ?? LAST_SEEN_FORKS,
+      };
+    },
+  });
+
+  const STARS_COUNT = githubStats.data?.stars ?? LAST_SEEN_STARS;
+  const FORKS_COUNT = githubStats.data?.forks ?? LAST_SEEN_FORKS;
 
   return (
     <section className="border-t border-neutral-100">
-      <div
-        className="border-b border-neutral-100 bg-neutral-50 h-4"
-        style={{ backgroundImage: "url(/patterns/slash.svg)" }}
-      />
       <div className="px-4 py-8">
         <div className="lg:hidden max-w-4xl mx-auto">
           <OpenSourceButton showStars={true} starCount={STARS_COUNT} />
@@ -280,10 +292,6 @@ export function GitHubOpenSource() {
           </div>
         </div>
       </div>
-      <div
-        className="border-t border-neutral-100 bg-neutral-50 h-4"
-        style={{ backgroundImage: "url(/patterns/slash.svg)" }}
-      />
     </section>
   );
 }

apps/web/src/components/github-stars.tsx

@@ -4,20 +4,26 @@ import { Icon } from "@iconify-icon/react";
 import { useQuery } from "@tanstack/react-query";
 
 export function GithubStars() {
-  const LAST_SEEN = 6400;
+  const LAST_SEEN_STARS = 6400;
+  const LAST_SEEN_FORKS = 396;
   const ORG_REPO = "fastrepl/hyprnote";
 
-  const star = useQuery({
-    queryKey: ["github-stars"],
+  const githubStats = useQuery({
+    queryKey: ["github-stats"],
     queryFn: async () => {
       const response = await fetch(`https://api.github.com/repos/${ORG_REPO}`);
       const data = await response.json();
-      return data.stargazers_count ?? LAST_SEEN;
+      return {
+        stars: data.stargazers_count ?? LAST_SEEN_STARS,
+        forks: data.forks_count ?? LAST_SEEN_FORKS,
+      };
     },
   });
 
   const render = (n: number) => n > 1000 ? `${(n / 1000).toFixed(1)}k` : n;
 
+  const starCount = githubStats.data?.stars ?? LAST_SEEN_STARS;
+
   return (
     <a href={`https://github.com/${ORG_REPO}`} target="_blank">
       <button
@@ -29,7 +35,7 @@ export function GithubStars() {
         ])}
       >
         <Icon icon="mdi:github" className="text-xl" />
-        <span className="ml-2">{star.data ? render(star.data) : render(LAST_SEEN)} stars</span>
+        <span className="ml-2">{render(starCount)} stars</span>
       </button>
     </a>
   );

apps/web/src/components/slash-separator.tsx

@@ -0,0 +1,8 @@
+export function SlashSeparator() {
+  return (
+    <div
+      className="border-b border-neutral-100 bg-neutral-50 h-4"
+      style={{ backgroundImage: "url(/patterns/slash.svg)" }}
+    />
+  );
+}

apps/web/src/routeTree.gen.ts

@@ -13,6 +13,7 @@ import { Route as XRouteImport } from './routes/x'
 import { Route as LinkedinRouteImport } from './routes/linkedin'
 import { Route as JoinWaitlistRouteImport } from './routes/join-waitlist'
 import { Route as GithubRouteImport } from './routes/github'
+import { Route as FoundersRouteImport } from './routes/founders'
 import { Route as DiscordRouteImport } from './routes/discord'
 import { Route as CalRouteImport } from './routes/cal'
 import { Route as AuthRouteImport } from './routes/auth'
@@ -58,6 +59,11 @@ const GithubRoute = GithubRouteImport.update({
   path: '/github',
   getParentRoute: () => rootRouteImport,
 } as any)
+const FoundersRoute = FoundersRouteImport.update({
+  id: '/founders',
+  path: '/founders',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const DiscordRoute = DiscordRouteImport.update({
   id: '/discord',
   path: '/discord',
@@ -182,6 +188,7 @@ export interface FileRoutesByFullPath {
   '/auth': typeof AuthRoute
   '/cal': typeof CalRoute
   '/discord': typeof DiscordRoute
+  '/founders': typeof FoundersRoute
   '/github': typeof GithubRoute
   '/join-waitlist': typeof JoinWaitlistRoute
   '/linkedin': typeof LinkedinRoute
@@ -211,6 +218,7 @@ export interface FileRoutesByTo {
   '/auth': typeof AuthRoute
   '/cal': typeof CalRoute
   '/discord': typeof DiscordRoute
+  '/founders': typeof FoundersRoute
   '/github': typeof GithubRoute
   '/join-waitlist': typeof JoinWaitlistRoute
   '/linkedin': typeof LinkedinRoute
@@ -240,6 +248,7 @@ export interface FileRoutesById {
   '/auth': typeof AuthRoute
   '/cal': typeof CalRoute
   '/discord': typeof DiscordRoute
+  '/founders': typeof FoundersRoute
   '/github': typeof GithubRoute
   '/join-waitlist': typeof JoinWaitlistRoute
   '/linkedin': typeof LinkedinRoute
@@ -271,6 +280,7 @@ export interface FileRouteTypes {
     | '/auth'
     | '/cal'
     | '/discord'
+    | '/founders'
     | '/github'
     | '/join-waitlist'
     | '/linkedin'
@@ -300,6 +310,7 @@ export interface FileRouteTypes {
     | '/auth'
     | '/cal'
     | '/discord'
+    | '/founders'
     | '/github'
     | '/join-waitlist'
     | '/linkedin'
@@ -328,6 +339,7 @@ export interface FileRouteTypes {
     | '/auth'
     | '/cal'
     | '/discord'
+    | '/founders'
     | '/github'
     | '/join-waitlist'
     | '/linkedin'
@@ -359,6 +371,7 @@ export interface RootRouteChildren {
   AuthRoute: typeof AuthRoute
   CalRoute: typeof CalRoute
   DiscordRoute: typeof DiscordRoute
+  FoundersRoute: typeof FoundersRoute
   GithubRoute: typeof GithubRoute
   JoinWaitlistRoute: typeof JoinWaitlistRoute
   LinkedinRoute: typeof LinkedinRoute
@@ -397,6 +410,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof GithubRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/founders': {
+      id: '/founders'
+      path: '/founders'
+      fullPath: '/founders'
+      preLoaderRoute: typeof FoundersRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/discord': {
       id: '/discord'
       path: '/discord'
@@ -639,6 +659,7 @@ const rootRouteChildren: RootRouteChildren = {
   AuthRoute: AuthRoute,
   CalRoute: CalRoute,
   DiscordRoute: DiscordRoute,
+  FoundersRoute: FoundersRoute,
   GithubRoute: GithubRoute,
   JoinWaitlistRoute: JoinWaitlistRoute,
   LinkedinRoute: LinkedinRoute,

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

@@ -1,7 +1,9 @@
 import { cn } from "@hypr/utils";
 
 import { Icon } from "@iconify-icon/react";
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, Link } from "@tanstack/react-router";
+
+import { SlashSeparator } from "@/components/slash-separator";
 
 export const Route = createFileRoute("/_view/download")({
   component: Component,
@@ -21,16 +23,13 @@ function Component() {
         ])}
       >
         <div className="py-3 px-4 mx-auto max-w-6xl border-x border-neutral-100 w-full">
-          <Icon icon="mdi:information-outline" className="text-base" />
-          <span>
-            Mac (Apple Silicon) features on-device speech-to-text. Other platforms coming soon without on-device
-            processing.
-          </span>
+          Mac (Apple Silicon) features on-device speech-to-text. Other platforms coming soon without on-device
+          processing.
         </div>
       </div>
 
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-12 bg-white border-x border-neutral-100">
-        <section className="py-16">
+      <div className="max-w-6xl mx-auto py-12 bg-white border-x border-neutral-100">
+        <section className="py-16 px-4 sm:px-6">
           <div className="space-y-6 max-w-2xl mx-auto text-center mb-16">
             <h1 className="text-4xl sm:text-5xl font-serif tracking-tight text-stone-600">
               Download Hyprnote
@@ -92,6 +91,14 @@ function Component() {
             </div>
           </div>
         </section>
+
+        <SlashSeparator />
+
+        <FAQSection />
+
+        <SlashSeparator />
+
+        <CTASection />
       </div>
     </div>
   );
@@ -109,7 +116,7 @@ function DownloadCard({
   available: boolean;
 }) {
   return (
-    <div className="flex flex-col items-center p-6 rounded-xl border border-neutral-100 bg-white hover:bg-stone-50 transition-all duration-200">
+    <div className="flex flex-col items-center p-6 rounded-sm border border-neutral-100 bg-white hover:bg-stone-50 transition-all duration-200">
       <Icon icon={iconName} className="text-5xl text-neutral-700 mb-4" />
       <p className="text-sm text-neutral-600 mb-6 text-center">{spec}</p>
 
@@ -131,9 +138,84 @@ function DownloadCard({
             disabled
             className="w-full px-4 h-11 bg-neutral-100 text-neutral-400 rounded-full font-medium cursor-not-allowed"
           >
-            Coming Soon
+            Planned
           </button>
         )}
     </div>
   );
 }
+
+function FAQSection() {
+  const faqs = [
+    {
+      question: "Which platforms are currently supported?",
+      answer:
+        "macOS 14.2+ with Apple Silicon is currently available. macOS Intel and Windows are planned for January 2026, Linux for February 2026, and iOS/Android for April 2026. Please note that these dates are subject to change and may be delayed.",
+    },
+    {
+      question: "What's special about the Mac version?",
+      answer:
+        "The Mac (Apple Silicon) version features on-device speech-to-text, ensuring your audio never leaves your device for complete privacy.",
+    },
+    {
+      question: "Do I need an internet connection?",
+      answer:
+        "For the free version with local transcription on Mac, no internet is required. Cloud features in the Pro plan require an internet connection.",
+    },
+    {
+      question: "How do I get started after downloading?",
+      answer:
+        "Simply install the app and launch it. For the free version, you can optionally bring your own API keys for LLM features. Check our documentation for detailed setup instructions.",
+    },
+  ];
+
+  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">
+          Frequently Asked Questions
+        </h2>
+        <div className="space-y-6">
+          {faqs.map((faq, idx) => (
+            <div key={idx} className="border-b border-neutral-100 pb-6 last:border-b-0">
+              <h3 className="text-lg font-medium text-neutral-900 mb-2">
+                {faq.question}
+              </h3>
+              <p className="text-neutral-600">{faq.answer}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function CTASection() {
+  return (
+    <section className="py-16 bg-linear-to-t from-stone-50/30 to-stone-100/30 px-4 laptop:px-0">
+      <div className="flex flex-col gap-6 items-center text-center">
+        <div className="mb-4 size-40 shadow-2xl border border-neutral-100 flex justify-center items-center rounded-[48px] bg-transparent">
+          <img
+            src="/hyprnote/icon.png"
+            alt="Hyprnote"
+            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>
+        <p className="text-lg text-neutral-600 max-w-2xl mx-auto">
+          Book a call to discuss custom team pricing and enterprise solutions
+        </p>
+        <div className="pt-6">
+          <Link
+            to="/founders"
+            className="px-6 h-12 flex items-center justify-center text-base sm:text-lg bg-linear-to-t from-stone-600 to-stone-500 text-white rounded-full shadow-md hover:shadow-lg hover:scale-[102%] active:scale-[98%] transition-all"
+          >
+            Book a call
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}