diff --git a/apps/web/src/components/video-thumbnail.tsx b/apps/web/src/components/video-thumbnail.tsx index e9ec0dfb2e..adeb6a4b85 100644 --- a/apps/web/src/components/video-thumbnail.tsx +++ b/apps/web/src/components/video-thumbnail.tsx @@ -45,11 +45,11 @@ export function VideoThumbnail({ "size-16 rounded-full bg-white/90 backdrop-blur-sm", "flex items-center justify-center", "hover:bg-white hover:scale-110 transition-all duration-200", - "shadow-xl", + "shadow-xl cursor-pointer", ])} aria-label="Play video" > - + diff --git a/apps/web/src/routes/_view/about.tsx b/apps/web/src/routes/_view/about.tsx index 62596c7d8e..6c9f37cd86 100644 --- a/apps/web/src/routes/_view/about.tsx +++ b/apps/web/src/routes/_view/about.tsx @@ -10,7 +10,6 @@ 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")({ @@ -30,8 +29,8 @@ const founders = [ { id: "john", name: "John Jeong", - role: "Co-founder & CEO", - bio: "Building tools that help people be more productive without compromising privacy. Passionate about local-first software and AI.", + role: "Chief Wisdom Seeker", + bio: "I love designing simple and intuitive user interfaces.", image: "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/team/john.png", links: { @@ -43,9 +42,9 @@ const founders = [ }, { id: "yujong", - name: "Yujong", - role: "Co-founder", - bio: "Focused on creating privacy-first productivity tools that respect user data and enhance workflows.", + name: "Yujong Lee", + role: "Chief OSS Lover", + bio: "I am super bullish about open-source software.", image: "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/team/yujong.png", links: { @@ -144,649 +143,769 @@ function Component() { style={{ backgroundImage: "url(/patterns/dots.svg)" }} >
- {/* Hero Section */} -
-
-

- About -

-

- Learn about Hyprnote, meet our team, and discover the story behind - our privacy-first note-taking platform. -

+ + +
+
+ ); +} + +function HeroSection() { + return ( +
+
+

+ About +

+

+ Learn about Hyprnote, meet our team, and discover the story behind our + privacy-first note-taking platform. +

+
+
+ ); +} + +function AboutContentSection({ + selectedItem, + setSelectedItem, +}: { + selectedItem: SelectedItem | null; + setSelectedItem: (item: SelectedItem | null) => void; +}) { + return ( +
+
+ +
+ {!selectedItem ? ( + + ) : ( + + )} +
+ + + +
+
+ ); +} + +function AboutGridView({ + setSelectedItem, +}: { + setSelectedItem: (item: SelectedItem) => void; +}) { + return ( +
+ + + +
+ ); +} + +function OurStoryGrid({ + setSelectedItem, +}: { + setSelectedItem: (item: SelectedItem) => void; +}) { + return ( +
+
+ Our Story +
+
+ +
+
+ ); +} + +function FoundersGrid({ + setSelectedItem, +}: { + setSelectedItem: (item: SelectedItem) => void; +}) { + return ( +
+
+ Founders +
+
+ {founders.map((founder) => ( + + ))} +
+
+ ); +} + +function TeamPhotosGrid({ + setSelectedItem, +}: { + setSelectedItem: (item: SelectedItem) => void; +}) { + return ( +
+
+ Team Photos +
+
+ {teamPhotos.map((photo) => ( + + ))} +
+
+ ); +} + +function AboutDetailView({ + selectedItem, + setSelectedItem, +}: { + selectedItem: SelectedItem; + setSelectedItem: (item: SelectedItem | null) => void; +}) { + return ( + + + + + + ); +} + +function AboutSidebar({ + selectedItem, + setSelectedItem, +}: { + selectedItem: SelectedItem; + setSelectedItem: (item: SelectedItem) => void; +}) { + return ( + +
+ + + +
+ + ); +} + +function OurStorySidebar({ + selectedItem, + setSelectedItem, +}: { + selectedItem: SelectedItem; + setSelectedItem: (item: SelectedItem) => void; +}) { + return ( +
+
+ Our Story +
+ +
+ ); +} - {/* Main Content Section */} -
-
- -
- {!selectedItem ? ( - // Grid view - show all items organized in groups -
- {/* Our Story Group */} -
-
- Our Story -
-
- -
-
- - {/* Founders Group */} -
-
- Founders -
-
- {founders.map((founder) => ( - - ))} -
-
- - {/* Team Photos Group */} -
-
- Team Photos -
-
- {teamPhotos.map((photo) => ( - - ))} -
-
-
- ) : ( - // Split view with resizable panels - - -
- {/* Our Story in sidebar */} -
-
- Our Story -
- -
- - {/* Founders in sidebar */} -
-
- Founders -
-
- {founders.map((founder) => ( - - ))} -
-
- - {/* Team Photos in sidebar */} -
-
- Team Photos -
-
- {teamPhotos.map((photo) => ( - - ))} -
-
-
- - - - - -
- {selectedItem?.type === "story" && ( - <> - {/* Story Header */} -
-

- Our Story.txt -

- -
- -
-
-

- Making notetaking effortless -

-

- We believe that capturing and organizing your - conversations shouldn't be a chore. That's why - we built Hyprnote - a tool that listens, - learns, and helps you remember what matters. -

- -

- Our Mission -

-
-
- -

- Privacy First -

-

- Your conversations are personal. We - process everything locally on your device - using on-device AI, so your data never - leaves your computer. -

-
-
- -

- Effortless Capture -

-

- Stop worrying about missing important - details. Hyprnote captures both your mic - and system audio, giving you complete - context for every conversation. -

-
-
- -

- Intelligent Organization -

-

- AI helps you find what matters. Automatic - transcription, smart summaries, and - searchable notes mean you'll never lose - track of important information. -

-
-
- -

- Built for Everyone -

-

- From remote workers to students, from - entrepreneurs to executives - Hyprnote - adapts to your workflow and helps you work - smarter. -

-
-
- -

- Our Story -

-

- Hyprnote was born from a simple frustration: - trying to take notes while staying engaged in - important conversations. Whether it was a - crucial client call, a brainstorming session - with the team, or an online lecture, we found - ourselves constantly torn between listening - and writing. -

-

- We looked for solutions, but everything - required bots joining meetings, cloud uploads, - or compromising on privacy. We knew there had - to be a better way. -

-

- That's when we started building Hyprnote - a - desktop application that captures audio - locally, processes it with on-device AI, and - gives you the freedom to be fully present in - your conversations while never missing a - detail. -

- -

- What We Stand For -

-
-
- -
-

- Privacy is non-negotiable -

-

- We will never compromise on privacy. - Your data belongs to you, period. -

-
-
-
- -
-

- Transparency in everything -

-

- We're open about how Hyprnote works, - from our tech stack to our pricing - model. -

-
-
-
- -
-

- Community-driven development -

-

- We build features our users actually - need, guided by your feedback and - requests. -

-
-
-
- -
-

- Continuous improvement -

-

- We ship updates regularly and are always - working to make Hyprnote better. -

-
-
-
- -
-

- Built by Fastrepl -

-

- Hyprnote is developed by Fastrepl, a team - dedicated to building productivity tools - that respect your privacy and enhance your - workflow. -

- -
-
-
- - )} - - {selectedItem?.type === "founder" && ( - <> - {/* Founder Header */} -
-

- {selectedItem.data.name} -

-
- - Download Photo - - -
-
- -
- {/* Image preview */} - {selectedItem.data.name} - - {/* Info */} -
-

- {selectedItem.data.name} -

-

- {selectedItem.data.role} -

-

- {selectedItem.data.bio} -

- - {/* Contact Links */} -
- {selectedItem.data.links.email && ( - - - Email - - )} - {selectedItem.data.links.twitter && ( - - - Twitter - - )} - {selectedItem.data.links.github && ( - - - GitHub - - )} - {selectedItem.data.links.linkedin && ( - - - LinkedIn - - )} -
-
-
- - )} - - {selectedItem?.type === "photo" && ( - <> - {/* Photo Header */} -
-

- {selectedItem.data.name} -

-
- - Download - - -
-
- -
- {/* Image preview with max-width 400px */} - {selectedItem.data.name} - - {/* Description */} -

- Team photo from the Hyprnote team. -

-
- - )} -
- - - )} -
+function FoundersSidebar({ + selectedItem, + setSelectedItem, +}: { + selectedItem: SelectedItem; + setSelectedItem: (item: SelectedItem) => void; +}) { + return ( +
+
+ Founders +
+
+ {founders.map((founder) => ( + + ))} +
+
+ ); +} + +function TeamPhotosSidebar({ + selectedItem, + setSelectedItem, +}: { + selectedItem: SelectedItem; + setSelectedItem: (item: SelectedItem) => void; +}) { + return ( +
+
+ Team Photos +
+
+ {teamPhotos.map((photo) => ( + + ))} +
+
+ ); +} + +function AboutDetailPanel({ + selectedItem, + setSelectedItem, +}: { + selectedItem: SelectedItem; + setSelectedItem: (item: SelectedItem | null) => void; +}) { + return ( + +
+ {selectedItem?.type === "story" && ( + setSelectedItem(null)} /> + )} + {selectedItem?.type === "founder" && ( + setSelectedItem(null)} + /> + )} + {selectedItem?.type === "photo" && ( + setSelectedItem(null)} + /> + )} +
+ + ); +} + +function StoryDetail({ onClose }: { onClose: () => void }) { + return ( + <> +
+

Our Story.txt

+ +
+ +
+
+

+ Making notetaking effortless +

+

+ We believe that capturing and organizing your conversations + shouldn't be a chore. That's why we built Hyprnote - a tool that + listens, learns, and helps you remember what matters. +

- {/* Status bar */} -
- - {selectedItem - ? selectedItem.type === "founder" - ? `Viewing ${selectedItem.data.name}` - : selectedItem.type === "photo" - ? `Viewing ${selectedItem.data.name}` - : "Viewing Our Story" - : `${1 + founders.length + teamPhotos.length} items, 3 groups`} - +

+ Our Mission +

+
+
+ +

+ Privacy First +

+

+ Your conversations are personal. We process everything locally + on your device using on-device AI, so your data never leaves + your computer. +

+
+
+ +

+ Effortless Capture +

+

+ Stop worrying about missing important details. Hyprnote captures + both your mic and system audio, giving you complete context for + every conversation. +

+
+
+ +

+ Intelligent Organization +

+

+ AI helps you find what matters. Automatic transcription, smart + summaries, and searchable notes mean you'll never lose track of + important information. +

+
+
+ +

+ Built for Everyone +

+

+ From remote workers to students, from entrepreneurs to + executives - Hyprnote adapts to your workflow and helps you work + smarter. +

+
+
+ +

+ Our Story +

+

+ Hyprnote was born from a simple frustration: trying to take notes + while staying engaged in important conversations. Whether it was a + crucial client call, a brainstorming session with the team, or an + online lecture, we found ourselves constantly torn between listening + and writing. +

+

+ We looked for solutions, but everything required bots joining + meetings, cloud uploads, or compromising on privacy. We knew there + had to be a better way. +

+

+ That's when we started building Hyprnote - a desktop application + that captures audio locally, processes it with on-device AI, and + gives you the freedom to be fully present in your conversations + while never missing a detail. +

+ +

+ What We Stand For +

+
+
+ +
+

+ Privacy is non-negotiable +

+

+ We will never compromise on privacy. Your data belongs to you, + period. +

+
+
+
+ +
+

+ Transparency in everything +

+

+ We're open about how Hyprnote works, from our tech stack to + our pricing model. +

- +
+
+ +
+

+ Community-driven development +

+

+ We build features our users actually need, guided by your + feedback and requests. +

+
+
+
+ +
+

+ Continuous improvement +

+

+ We ship updates regularly and are always working to make + Hyprnote better. +

+
+
+
+ +
+

+ Built by Fastrepl +

+

+ Hyprnote is developed by Fastrepl, a team dedicated to building + productivity tools that respect your privacy and enhance your + workflow. +

+ +
+
+
+ + ); +} + +function FounderDetail({ + founder, + onClose, +}: { + founder: (typeof founders)[0]; + onClose: () => void; +}) { + return ( + <> +
+

{founder.name}

+ +
+ +
+
+ {founder.name} +
+ +
+

+ {founder.name} +

+

+ {founder.role} +

+

+ {founder.bio} +

+ +
+ {founder.links.email && ( + + + Email + + )} + {founder.links.twitter && ( + + + Twitter + + )} + {founder.links.github && ( + + + GitHub + + )} + {founder.links.linkedin && ( + + + LinkedIn + + )}
-
+
+ + + ); +} + +function PhotoDetail({ + photo, + onClose, +}: { + photo: (typeof teamPhotos)[0]; + onClose: () => void; +}) { + return ( + <> +
+

{photo.name}

+
+ + Download + + +
+ +
+ {photo.name} + +

+ Team photo from the Hyprnote team. +

+
+ + ); +} + +function AboutStatusBar({ + selectedItem, +}: { + selectedItem: SelectedItem | null; +}) { + const totalItems = 1 + founders.length + teamPhotos.length; + + return ( +
+ + {selectedItem + ? selectedItem.type === "founder" + ? `Viewing ${selectedItem.data.name}` + : selectedItem.type === "photo" + ? `Viewing ${selectedItem.data.name}` + : "Viewing Our Story" + : `${totalItems} items, 3 groups`} +
); } diff --git a/apps/web/src/routes/_view/docs/route.tsx b/apps/web/src/routes/_view/docs/route.tsx index 082e6370b9..38dd955c45 100644 --- a/apps/web/src/routes/_view/docs/route.tsx +++ b/apps/web/src/routes/_view/docs/route.tsx @@ -77,8 +77,8 @@ function LeftSidebar() { }, []); return ( -