-
Notifications
You must be signed in to change notification settings - Fork 531
Add product/templates page and update header links #3710
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
devin-ai-integration
wants to merge
3
commits into
main
Choose a base branch
from
devin/1770472597-product-templates-page
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+226
−2
Open
Changes from all commits
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
3c46f11
add product/templates page and update header links
devin-ai-integration[bot] cddb8be
fix typecheck: use anchor tags for template links
devin-ai-integration[bot] 32f580b
update copy: how it works subtitle, remove contribute section, update…
devin-ai-integration[bot] File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,203 @@ | ||
| import { createFileRoute, Link } from "@tanstack/react-router"; | ||
| import { allTemplates } from "content-collections"; | ||
|
|
||
| import { cn } from "@hypr/utils"; | ||
|
|
||
| import { DownloadButton } from "@/components/download-button"; | ||
| import { SlashSeparator } from "@/components/slash-separator"; | ||
|
|
||
| export const Route = createFileRoute("/_view/product/templates")({ | ||
| component: Component, | ||
| head: () => ({ | ||
| meta: [ | ||
| { title: "Custom Templates - Hyprnote" }, | ||
| { | ||
| name: "description", | ||
| content: | ||
| "Pick or build a template for your recurring meetings and get perfectly formatted notes automatically. Pre-built and custom templates for every meeting type.", | ||
| }, | ||
| { | ||
| property: "og:title", | ||
| content: "Custom Templates - Hyprnote", | ||
| }, | ||
| { | ||
| property: "og:description", | ||
| content: | ||
| "Pick or build a template for your recurring meetings and get perfectly formatted notes automatically.", | ||
| }, | ||
| { property: "og:type", content: "website" }, | ||
| { | ||
| property: "og:url", | ||
| content: "https://hyprnote.com/product/templates", | ||
| }, | ||
| ], | ||
| }), | ||
| }); | ||
|
|
||
| function Component() { | ||
| return ( | ||
| <div | ||
| className="bg-linear-to-b from-white via-stone-50/20 to-white min-h-screen" | ||
| style={{ backgroundImage: "url(/patterns/dots.svg)" }} | ||
| > | ||
| <div className="max-w-6xl mx-auto border-x border-neutral-100 bg-white"> | ||
| <HeroSection /> | ||
| <SlashSeparator /> | ||
| <HowItWorksSection /> | ||
| <SlashSeparator /> | ||
| <PreBuiltOrCustomSection /> | ||
| <SlashSeparator /> | ||
| <CTASection /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function HeroSection() { | ||
| return ( | ||
| <div className="bg-linear-to-b from-stone-50/30 to-stone-100/30"> | ||
| <div className="px-6 py-12 lg:py-20"> | ||
| <header className="mb-12 text-center max-w-4xl mx-auto"> | ||
| <h1 className="text-4xl sm:text-5xl font-serif tracking-tight text-stone-600 mb-6"> | ||
| Template for Every Meeting Type | ||
| </h1> | ||
| <p className="text-lg sm:text-xl text-neutral-600"> | ||
| Pick (or build) a template for your recurring meetings and get | ||
| perfectly formatted notes automatically. | ||
| </p> | ||
| <div className="mt-8"> | ||
| <Link | ||
| to="/download/" | ||
| className={cn([ | ||
| "inline-block px-8 py-3 text-base font-medium rounded-full", | ||
| "bg-linear-to-t from-stone-600 to-stone-500 text-white", | ||
| "hover:scale-105 active:scale-95 transition-transform", | ||
| ])} | ||
| > | ||
| Download for free | ||
| </Link> | ||
| </div> | ||
| </header> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function HowItWorksSection() { | ||
| return ( | ||
| <section className="px-6 py-12 lg:py-20"> | ||
| <div className="max-w-4xl mx-auto"> | ||
| <h2 className="text-3xl sm:text-4xl font-serif text-stone-600 text-center mb-4"> | ||
| How it works | ||
| </h2> | ||
| <p className="text-lg text-neutral-600 text-center mb-12"> | ||
| You can pick a template before your meeting or try different formats | ||
| later. | ||
| </p> | ||
|
|
||
| <div className="grid sm:grid-cols-2 gap-8"> | ||
| <div className="flex flex-col gap-4"> | ||
| <h3 className="text-lg font-semibold text-stone-700"> | ||
| Before a meeting | ||
| </h3> | ||
| <div className="aspect-video w-full rounded-xs border border-neutral-200 bg-stone-50 flex items-center justify-center"> | ||
| <span className="text-sm text-neutral-400 italic">GIF</span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex flex-col gap-4"> | ||
| <h3 className="text-lg font-semibold text-stone-700"> | ||
| After a meeting | ||
| </h3> | ||
| <div className="aspect-video w-full rounded-xs border border-neutral-200 bg-stone-50 flex items-center justify-center"> | ||
| <span className="text-sm text-neutral-400 italic">GIF</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| } | ||
|
|
||
| function PreBuiltOrCustomSection() { | ||
| return ( | ||
| <section className="px-6 py-12 lg:py-20 bg-stone-50/30"> | ||
| <div className="max-w-4xl mx-auto"> | ||
| <h2 className="text-3xl sm:text-4xl font-serif text-stone-600 text-center mb-12"> | ||
| Pre-built or custom — your choice | ||
| </h2> | ||
|
|
||
| <div className="flex flex-col gap-16"> | ||
| <div> | ||
| <h3 className="text-xl font-semibold text-stone-700 mb-2"> | ||
| Community templates | ||
| </h3> | ||
| <p className="text-base text-neutral-600 mb-6"> | ||
| Pre-built templates for common meeting types. Discovery calls, | ||
| sprint planning, 1-on-1s, technical reviews — just pick one and | ||
| use it. | ||
| </p> | ||
| <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4"> | ||
| {allTemplates.slice(0, 6).map((template) => ( | ||
| <a | ||
| key={template.slug} | ||
| href={`/templates/${template.slug}`} | ||
| className="group p-4 border border-neutral-200 rounded-xs bg-white hover:shadow-md hover:border-neutral-300 transition-all" | ||
| > | ||
| <p className="text-xs text-neutral-500 mb-1"> | ||
| {template.category} | ||
| </p> | ||
| <h4 className="font-serif text-base text-stone-600 group-hover:text-stone-800 transition-colors"> | ||
| {template.title} | ||
| </h4> | ||
| </a> | ||
| ))} | ||
| </div> | ||
| <div className="mt-4 text-center"> | ||
| <a | ||
| href="/gallery/?type=template" | ||
| className="text-sm text-stone-600 hover:text-stone-800 underline decoration-dotted underline-offset-2 transition-colors" | ||
| > | ||
| Browse all {allTemplates.length} templates | ||
| </a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div> | ||
| <h3 className="text-xl font-semibold text-stone-700 mb-2"> | ||
| Custom templates | ||
| </h3> | ||
| <p className="text-base text-neutral-600 mb-6"> | ||
| Build templates that match your exact workflow. Store them | ||
| locally. Use them whenever you need. | ||
| </p> | ||
| <div className="aspect-video w-full rounded-xs border border-neutral-200 bg-white flex items-center justify-center"> | ||
| <span className="text-sm text-neutral-400 italic">Image</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| } | ||
|
|
||
| function CTASection() { | ||
| return ( | ||
| <section className="py-16 px-6 text-center"> | ||
| <div className="max-w-2xl mx-auto flex flex-col gap-6"> | ||
| <h2 className="text-3xl sm:text-4xl font-serif text-stone-600"> | ||
| Stop reformatting notes manually | ||
| </h2> | ||
| <p className="text-lg text-neutral-600"> | ||
| Download Hyprnote and set up your first template in 30 seconds. | ||
| </p> | ||
| <div className="flex flex-col items-center gap-4 pt-4"> | ||
| <DownloadButton /> | ||
| <p className="text-sm text-neutral-500"> | ||
| Free to use. No credit card required. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| } | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.