coder/meetingnotes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 34 Wiki Activity

refactor: remove some landing page sections and adjust copy

Browse Source
This commit is contained in:
Owen Gretzinger
2025-07-12 00:10:48 -04:00
parent 6226d9b389
commit db1eba6e44
7 changed files with 164 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
landing-page/app/components/community.tsx
+33 -23
View File
@@ -1,20 +1,22 @@
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card" import { Card, CardContent } from "@/components/ui/card";
import { Star, GitFork, Users, Heart } from "lucide-react" import { Star, GitFork, Users, Heart } from "lucide-react";
export default function Community() { export default function Community() {
return ( return (
<section id="community" className="py-20 px-4 bg-black"> <section id="community" className="py-20 px-4 bg-black">
<div className="container mx-auto"> <div className="container mx-auto">
<div className="text-center mb-16"> <div className="text-center mb-8">
<h2 className="text-4xl md:text-5xl font-bold mb-6">Join the Open-Source Community</h2> <h2 className="text-4xl md:text-5xl font-bold mb-6">
Join the Open-Source Community
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto"> <p className="text-xl text-gray-300 max-w-3xl mx-auto">
Meetingnotes is built by the community for the community. Star us on GitHub, contribute features, or report Meetingnotes is built by the community for the community. Star us on
issues. GitHub, contribute features, or report issues.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-3 gap-8 mb-12"> {/* <div className="grid md:grid-cols-3 gap-8 mb-12">
<Card className="bg-gray-900/50 border-gray-800 text-center"> <Card className="bg-gray-900/50 border-gray-800 text-center">
<CardContent className="p-8"> <CardContent className="p-8">
<Star className="w-12 h-12 text-yellow-400 mx-auto mb-4" /> <Star className="w-12 h-12 text-yellow-400 mx-auto mb-4" />
@@ -38,10 +40,30 @@ export default function Community() {
<p className="text-gray-300">Contributors</p> <p className="text-gray-300">Contributors</p>
</CardContent> </CardContent>
</Card> </Card>
</div> */}
<div className="bg-gradient-to-r from-purple-600/20 to-pink-600/20 rounded-xl p-8 border border-purple-600/30 text-center mb-12">
<Heart className="w-12 h-12 text-pink-400 mx-auto mb-4" />
<h3 className="text-2xl font-bold mb-4">Help Build the Future</h3>
<p className="text-gray-300 mb-4">
Add integrations, templates, or custom models! Every contribution
makes Meetingnotes better for everyone.
</p>
{/* <blockquote className="text-lg font-medium text-gray-200 mb-4">
"As an open-source project, Meetingnotes is transparent and
customizable—perfect for privacy-focused users."
</blockquote>
<cite className="text-purple-400 font-semibold">
– Developer & Contributor
</cite> */}
</div> </div>
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-12"> <div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button size="lg" className="bg-gray-800 hover:bg-gray-700 border border-gray-600" asChild> <Button
size="lg"
className="bg-gray-800 hover:bg-gray-700 border border-gray-600"
asChild
>
<a href="https://github.com/owengretzinger/meetingnotes"> <a href="https://github.com/owengretzinger/meetingnotes">
<Star className="w-5 h-5 mr-2" /> <Star className="w-5 h-5 mr-2" />
Star on GitHub Star on GitHub
@@ -54,19 +76,7 @@ export default function Community() {
</a> </a>
</Button> </Button>
</div> </div>
<div className="bg-gradient-to-r from-purple-600/20 to-pink-600/20 rounded-xl p-8 border border-purple-600/30 text-center">
<Heart className="w-12 h-12 text-pink-400 mx-auto mb-4" />
<h3 className="text-2xl font-bold mb-4">Help Build the Future</h3>
<p className="text-gray-300 mb-4">
Add integrations, templates, or custom models! Every contribution makes Meetingnotes better for everyone.
</p>
<blockquote className="text-lg font-medium text-gray-200 mb-4">
"As an open-source project, Meetingnotes is transparent and customizable—perfect for privacy-focused users."
</blockquote>
<cite className="text-purple-400 font-semibold">– Developer & Contributor</cite>
</div>
</div> </div>
</section> </section>
) );
} }
landing-page/app/components/features.tsx
+30 -20
View File
@@ -1,5 +1,5 @@
import { Card, CardContent } from "@/components/ui/card" import { Card, CardContent } from "@/components/ui/card";
import { Mic, Lightbulb, Settings, FolderOpen } from "lucide-react" import { Mic, Lightbulb, Settings, FolderOpen } from "lucide-react";
export default function Features() { export default function Features() {
const features = [ const features = [
@@ -31,34 +31,41 @@ export default function Features() {
"Search, delete, copy notes/transcripts, and auto-update the app. Organize your meeting history with powerful management tools.", "Search, delete, copy notes/transcripts, and auto-update the app. Organize your meeting history with powerful management tools.",
image: "/placeholder.svg?height=200&width=300", image: "/placeholder.svg?height=200&width=300",
}, },
] ];
return ( return (
<section id="features" className="py-20 px-4 bg-gray-900"> <section id="features" className="py-6 px-4 bg-gray-900">
<div className="container mx-auto"> <div className="container mx-auto">
<div className="text-center mb-16"> {/* <div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold mb-6">Powerful Features, All Free and Open Source</h2> <h2 className="text-4xl md:text-5xl font-bold mb-6">Powerful Features, All Free and Open Source</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto"> <p className="text-xl text-gray-300 max-w-3xl mx-auto">
Meetingnotes handles your meeting notes effortlessly, from live transcription to AI-generated summaries. Meetingnotes handles your meeting notes effortlessly, from live transcription to AI-generated summaries.
Customize it to fit your workflow, and contribute to make it even better. Customize it to fit your workflow, and contribute to make it even better.
</p> </p>
</div> </div> */}
<div className="grid md:grid-cols-2 gap-8 mb-12"> <div className="grid md:grid-cols-2 gap-8 mb-12">
{features.map((feature, index) => ( {features.map((feature, index) => (
<Card key={index} className="bg-black/50 border-gray-800 hover:border-gray-700 transition-colors"> <Card
key={index}
className="bg-black/50 border-gray-800 hover:border-gray-700 transition-colors"
>
<CardContent className="p-8"> <CardContent className="p-8">
<div className="flex items-start space-x-4"> <div className="flex-1">
<div className="flex-shrink-0">{feature.icon}</div> <div className="flex items-start space-x-4">
<div className="flex-1"> <div className="flex-shrink-0">{feature.icon}</div>
<h3 className="text-2xl font-bold mb-3 text-white">{feature.title}</h3> <h3 className="text-2xl font-bold mb-3 text-white">
<p className="text-gray-300 mb-4 leading-relaxed">{feature.description}</p> {feature.title}
<img </h3>
src={feature.image || "/placeholder.svg"}
alt={`${feature.title} screenshot`}
className="w-full rounded-lg border border-gray-800"
/>
</div> </div>
<p className="text-gray-300 mb-4 leading-relaxed">
{feature.description}
</p>
<img
src={feature.image || "/placeholder.svg"}
alt={`${feature.title} screenshot`}
className="w-full rounded-lg border border-gray-800"
/>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
@@ -68,11 +75,14 @@ export default function Features() {
<div className="bg-gradient-to-r from-blue-600/20 to-purple-600/20 rounded-xl p-8 border border-blue-600/30"> <div className="bg-gradient-to-r from-blue-600/20 to-purple-600/20 rounded-xl p-8 border border-blue-600/30">
<h3 className="text-2xl font-bold mb-4 text-center">Coming Soon</h3> <h3 className="text-2xl font-bold mb-4 text-center">Coming Soon</h3>
<p className="text-gray-300 text-center mb-4"> <p className="text-gray-300 text-center mb-4">
Google Calendar integration, note templates, AI chat for questions, and more integrations (email, Slack). Google Calendar integration, note templates, AI chat for questions,
and more integrations (email, Slack).
</p>
<p className="text-blue-400 text-center font-semibold">
Contribute on GitHub to help build these features!
</p> </p>
<p className="text-blue-400 text-center font-semibold">Contribute on GitHub to help build these features!</p>
</div> </div>
</div> </div>
</section> </section>
) );
} }
landing-page/app/components/header.tsx
+3 -3
View File
@@ -15,13 +15,13 @@ export default function Header() {
</a> </a>
<nav className="hidden md:flex items-center space-x-8"> <nav className="hidden md:flex items-center space-x-8">
<a href="#features" className="text-gray-300 hover:text-white transition-colors"> <a href="/#features" className="text-gray-300 hover:text-white transition-colors">
Features Features
</a> </a>
<a href="#how-it-works" className="text-gray-300 hover:text-white transition-colors"> <a href="/#how-it-works" className="text-gray-300 hover:text-white transition-colors">
How it Works How it Works
</a> </a>
<a href="#pricing" className="text-gray-300 hover:text-white transition-colors"> <a href="/#pricing" className="text-gray-300 hover:text-white transition-colors">
Pricing Pricing
</a> </a>
<a <a
landing-page/app/components/hero.tsx
+3 -3
View File
@@ -4,7 +4,7 @@ import { Download, Github, Star, Shield, Code, Zap } from "lucide-react"
export default function Hero() { export default function Hero() {
return ( return (
<section className="py-20 px-4 bg-gradient-to-b from-black to-gray-900"> <section className="pb-6 pt-12 px-4 bg-gradient-to-b from-black to-gray-900">
<div className="container mx-auto text-center"> <div className="container mx-auto text-center">
<Badge variant="secondary" className="mb-8 bg-blue-600/20 text-blue-400 border-blue-600/30"> <Badge variant="secondary" className="mb-8 bg-blue-600/20 text-blue-400 border-blue-600/30">
✨ Open-Source Alternative to Granola – Completely Free! ✨ Open-Source Alternative to Granola – Completely Free!
@@ -83,7 +83,7 @@ export default function Hero() {
</div> </div>
</div> </div>
<div className="mt-8 flex items-center justify-center space-x-4 text-sm text-gray-400"> {/* <div className="mt-8 flex items-center justify-center space-x-4 text-sm text-gray-400">
<div className="flex items-center space-x-1"> <div className="flex items-center space-x-1">
<Star className="w-4 h-4 text-yellow-500" /> <Star className="w-4 h-4 text-yellow-500" />
<span>1.2k stars on GitHub</span> <span>1.2k stars on GitHub</span>
@@ -92,7 +92,7 @@ export default function Hero() {
<span>500+ downloads</span> <span>500+ downloads</span>
<span>•</span> <span>•</span>
<span>50+ contributors</span> <span>50+ contributors</span>
</div> </div> */}
</div> </div>
</section> </section>
) )
landing-page/app/components/how-it-works.tsx
+6 -6
View File
@@ -31,16 +31,16 @@ export default function HowItWorks() {
] ]
return ( return (
<section id="how-it-works" className="py-20 px-4 bg-black"> <section id="how-it-works" className="py-12 px-4 bg-black">
<div className="container mx-auto"> <div className="container mx-auto">
<div className="text-center mb-16"> <div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold mb-6">How meetingnotes Works</h2> <h2 className="text-4xl md:text-5xl font-bold mb-6">How Meetingnotes Works</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto"> <p className="text-xl text-gray-300 max-w-3xl mx-auto">
Get started in minutes with our simple, privacy-first approach to meeting notes. Get started in minutes with our simple, privacy-first approach to meeting notes.
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16"> <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
{steps.map((step, index) => ( {steps.map((step, index) => (
<Card key={index} className="bg-gray-900/50 border-gray-800 text-center"> <Card key={index} className="bg-gray-900/50 border-gray-800 text-center">
<CardContent className="p-8"> <CardContent className="p-8">
@@ -55,12 +55,12 @@ export default function HowItWorks() {
))} ))}
</div> </div>
<div className="bg-gradient-to-r from-gray-900 to-gray-800 rounded-xl p-8 border border-gray-700 text-center"> {/* <div className="bg-gradient-to-r from-gray-900 to-gray-800 rounded-xl p-8 border border-gray-700 text-center">
<blockquote className="text-2xl font-medium text-gray-200 mb-4"> <blockquote className="text-2xl font-medium text-gray-200 mb-4">
"meetingnotes saves me hours every week—best part? It's free and open source!" "Meetingnotes saves me hours every week—best part? It's free and open source!"
</blockquote> </blockquote>
<cite className="text-blue-400 font-semibold">– Open-Source Contributor</cite> <cite className="text-blue-400 font-semibold">– Open-Source Contributor</cite>
</div> </div> */}
</div> </div>
</section> </section>
) )
landing-page/app/components/pricing.tsx
+88 -74
View File
@@ -9,8 +9,7 @@ export default function Pricing() {
<div className="text-center mb-16"> <div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold mb-6">Pricing That Makes Sense</h2> <h2 className="text-4xl md:text-5xl font-bold mb-6">Pricing That Makes Sense</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto"> <p className="text-xl text-gray-300 max-w-3xl mx-auto">
No subscriptions, no hidden fees, no premium tiers. Just bring your own API keys and enjoy unlimited No subscriptions, no hidden fees, no premium tiers.
AI-powered meeting notes.
</p> </p>
</div> </div>
@@ -19,97 +18,112 @@ export default function Pricing() {
<div className="absolute top-0 left-0 right-0 bg-green-500 text-black text-center py-2 font-bold"> <div className="absolute top-0 left-0 right-0 bg-green-500 text-black text-center py-2 font-bold">
✨ COMPLETELY FREE FOREVER ✨ COMPLETELY FREE FOREVER
</div> </div>
<CardContent className="p-8 mt-8">
<div className="text-center mb-8"> <CardContent className="pt-16 pb-12 px-12 text-center">
<div className="flex items-center justify-center mb-4"> <div className="mb-8">
<DollarSign className="w-16 h-16 text-green-400" /> <div className="text-6xl font-bold mb-4 text-green-400">$0</div>
<span className="text-6xl font-bold text-green-400">0</span> <div className="text-2xl text-gray-300">Forever and always</div>
</div>
<h3 className="text-3xl font-bold mb-2">Free Forever</h3>
<p className="text-gray-300 text-lg">No costs, no subscriptions, no limits</p>
</div> </div>
<div className="grid md:grid-cols-2 gap-8 mb-8"> <div className="grid md:grid-cols-2 gap-8 mb-12">
<div> <div>
<h4 className="text-xl font-bold mb-4 flex items-center"> <h3 className="text-2xl font-bold mb-6 text-white">What's Included</h3>
<Shield className="w-5 h-5 text-blue-400 mr-2" /> <ul className="space-y-4 text-left">
Core Features <li className="flex items-center space-x-3">
</h4> <Check className="w-5 h-5 text-green-400 flex-shrink-0" />
<ul className="space-y-3"> <span className="text-gray-200">Unlimited meeting recordings</span>
<li className="flex items-start space-x-3">
<Check className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" />
<span className="text-gray-300">Real-time transcription</span>
</li> </li>
<li className="flex items-start space-x-3"> <li className="flex items-center space-x-3">
<Check className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" /> <Check className="w-5 h-5 text-green-400 flex-shrink-0" />
<span className="text-gray-300">AI-enhanced notes</span> <span className="text-gray-200">Real-time AI transcription</span>
</li> </li>
<li className="flex items-start space-x-3"> <li className="flex items-center space-x-3">
<Check className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" /> <Check className="w-5 h-5 text-green-400 flex-shrink-0" />
<span className="text-gray-300">Local storage & privacy</span> <span className="text-gray-200">AI-enhanced meeting summaries</span>
</li> </li>
<li className="flex items-start space-x-3"> <li className="flex items-center space-x-3">
<Check className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" /> <Check className="w-5 h-5 text-green-400 flex-shrink-0" />
<span className="text-gray-300">Unlimited meetings</span> <span className="text-gray-200">Complete data privacy (local storage)</span>
</li> </li>
<li className="flex items-start space-x-3"> <li className="flex items-center space-x-3">
<Check className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" /> <Check className="w-5 h-5 text-green-400 flex-shrink-0" />
<span className="text-gray-300">Search & export</span> <span className="text-gray-200">Full source code access</span>
</li>
<li className="flex items-center space-x-3">
<Check className="w-5 h-5 text-green-400 flex-shrink-0" />
<span className="text-gray-200">Customizable AI prompts</span>
</li>
<li className="flex items-center space-x-3">
<Check className="w-5 h-5 text-green-400 flex-shrink-0" />
<span className="text-gray-200">Regular updates and improvements</span>
</li> </li>
</ul> </ul>
</div> </div>
<div> <div>
<h4 className="text-xl font-bold mb-4 flex items-center"> <h3 className="text-2xl font-bold mb-6 text-white">How It Works</h3>
<Key className="w-5 h-5 text-yellow-400 mr-2" /> <div className="space-y-6 text-left">
Your API Keys <div className="flex items-start space-x-3">
</h4> <Key className="w-6 h-6 text-blue-400 flex-shrink-0 mt-1" />
<ul className="space-y-3"> <div>
<li className="flex items-start space-x-3"> <h4 className="font-semibold text-white mb-1">Bring Your Own API Keys</h4>
<Check className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" /> <p className="text-gray-300 text-sm">
<span className="text-gray-300">Bring your own OpenAI key</span> Use your OpenAI API key. Pay only for what you use, directly to the providers.
</li> </p>
<li className="flex items-start space-x-3"> </div>
<Check className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" /> </div>
<span className="text-gray-300">~$0.20/hour usage cost</span>
</li> <div className="flex items-start space-x-3">
<li className="flex items-start space-x-3"> <Shield className="w-6 h-6 text-green-400 flex-shrink-0 mt-1" />
<Check className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" /> <div>
<span className="text-gray-300">Full control over your data</span> <h4 className="font-semibold text-white mb-1">Your Keys, Your Control</h4>
</li> <p className="text-gray-300 text-sm">
<li className="flex items-start space-x-3"> API keys are stored securely on your device. We never see or store your credentials.
<Check className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" /> </p>
<span className="text-gray-300">No middleman or markup</span> </div>
</li> </div>
<li className="flex items-start space-x-3">
<Check className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" /> <div className="flex items-start space-x-3">
<span className="text-gray-300">Stored securely on-device</span> <DollarSign className="w-6 h-6 text-purple-400 flex-shrink-0 mt-1" />
</li> <div>
</ul> <h4 className="font-semibold text-white mb-1">Typical Costs</h4>
<p className="text-gray-300 text-sm">
~$0.20/hour using gpt-4o-mini-transcribe for transcription and gpt-4.1-mini for summarization.
</p>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div className="bg-gray-900/50 rounded-lg p-6 mb-8"> <div className="bg-gray-900/50 rounded-xl p-6 mb-8">
<h4 className="text-lg font-bold mb-3 text-center">💰 Cost Breakdown</h4> <h4 className="text-xl font-bold mb-3 text-yellow-400">Compare to Alternatives</h4>
<div className="grid grid-cols-2 gap-4 text-center"> <div className="grid md:grid-cols-4 gap-4 text-sm">
<div> <div className="text-center">
<div className="text-2xl font-bold text-green-400">$0</div> <div className="font-semibold text-white">Meetingnotes</div>
<div className="text-sm text-gray-400">App Cost</div> <div className="text-green-400">$0 + API costs</div>
<div className="text-gray-400">~$0.20/hour</div>
</div> </div>
<div> <div className="text-center">
<div className="text-2xl font-bold text-blue-400">~$0.20</div> <div className="font-semibold text-white">Granola</div>
<div className="text-sm text-gray-400">Per Hour (OpenAI)</div> <div className="text-red-400">$18/month</div>
<div className="text-gray-400">Subscription required</div>
</div>
<div className="text-center">
<div className="font-semibold text-white">Fathom</div>
<div className="text-red-400">$15/month</div>
<div className="text-gray-400">Bot joins meetings</div>
</div>
<div className="text-center">
<div className="font-semibold text-white">Fireflies</div>
<div className="text-red-400">$10/month</div>
<div className="text-gray-400">Storage limits</div>
</div> </div>
</div>
<div className="mt-4 text-center text-sm text-gray-400">
<strong>Example:</strong> 10 hours of meetings = ~$2.00 total
</div> </div>
</div> </div>
<Button size="lg" className="bg-green-600 hover:bg-green-700 text-lg px-8 py-4" asChild> <Button size="lg" className="bg-green-600 hover:bg-green-700 text-lg px-8 py-4">
<a href="/download"> Download Free Now
Download Free Now
</a>
</Button> </Button>
<p className="text-sm text-gray-400 mt-4"> <p className="text-sm text-gray-400 mt-4">
@@ -121,4 +135,4 @@ export default function Pricing() {
</div> </div>
</section> </section>
) )
} }
landing-page/app/download/page.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ export default function DownloadPage() {
<h2 className="text-2xl font-bold">Download Now</h2> <h2 className="text-2xl font-bold">Download Now</h2>
</div> </div>
<p className="text-gray-300 mb-6"> <p className="text-gray-300 mb-6">
Ready to try it out? Download the latest version of Meetingnotes for macOS. Ready to try it out? Download the latest version of Meetingnotes for macOS (Requires macOS 14.0 or later).
</p> </p>
<Button size="lg" className="bg-green-600 hover:bg-green-700 w-full" asChild> <Button size="lg" className="bg-green-600 hover:bg-green-700 w-full" asChild>
<a href="https://github.com/owengretzinger/meetingnotes/releases" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/owengretzinger/meetingnotes/releases" target="_blank" rel="noopener noreferrer">