refactor: remove some landing page sections and adjust copy
This commit is contained in:
Owen Gretzinger
@@ -1,20 +1,22 @@
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Star, GitFork, Users, Heart } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Star, GitFork, Users, Heart } from "lucide-react";
|
||||
|
||||
export default function Community() {
|
||||
return (
|
||||
<section id="community" className="py-20 px-4 bg-black">
|
||||
<div className="container mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-6">Join the Open-Source Community</h2>
|
||||
<div className="text-center mb-8">
|
||||
<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">
|
||||
Meetingnotes is built by the community for the community. Star us on GitHub, contribute features, or report
|
||||
issues.
|
||||
Meetingnotes is built by the community for the community. Star us on
|
||||
GitHub, contribute features, or report issues.
|
||||
</p>
|
||||
</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">
|
||||
<CardContent className="p-8">
|
||||
<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>
|
||||
</CardContent>
|
||||
</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 className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
|
||||
<Button size="lg" className="bg-gray-800 hover:bg-gray-700 border border-gray-600" asChild>
|
||||
<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
|
||||
>
|
||||
<a href="https://github.com/owengretzinger/meetingnotes">
|
||||
<Star className="w-5 h-5 mr-2" />
|
||||
Star on GitHub
|
||||
@@ -54,19 +76,7 @@ export default function Community() {
|
||||
</a>
|
||||
</Button>
|
||||
</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>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Mic, Lightbulb, Settings, FolderOpen } from "lucide-react"
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Mic, Lightbulb, Settings, FolderOpen } from "lucide-react";
|
||||
|
||||
export default function 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.",
|
||||
image: "/placeholder.svg?height=200&width=300",
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
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="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>
|
||||
<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.
|
||||
Customize it to fit your workflow, and contribute to make it even better.
|
||||
</p>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
||||
{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">
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="flex-shrink-0">{feature.icon}</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-2xl font-bold mb-3 text-white">{feature.title}</h3>
|
||||
<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 className="flex-1">
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="flex-shrink-0">{feature.icon}</div>
|
||||
<h3 className="text-2xl font-bold mb-3 text-white">
|
||||
{feature.title}
|
||||
</h3>
|
||||
</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>
|
||||
</CardContent>
|
||||
</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">
|
||||
<h3 className="text-2xl font-bold mb-4 text-center">Coming Soon</h3>
|
||||
<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 className="text-blue-400 text-center font-semibold">Contribute on GitHub to help build these features!</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -15,13 +15,13 @@ export default function Header() {
|
||||
</a>
|
||||
|
||||
<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
|
||||
</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
|
||||
</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
|
||||
</a>
|
||||
<a
|
||||
|
||||
@@ -4,7 +4,7 @@ import { Download, Github, Star, Shield, Code, Zap } from "lucide-react"
|
||||
|
||||
export default function Hero() {
|
||||
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">
|
||||
<Badge variant="secondary" className="mb-8 bg-blue-600/20 text-blue-400 border-blue-600/30">
|
||||
✨ Open-Source Alternative to Granola – Completely Free!
|
||||
@@ -83,7 +83,7 @@ export default function Hero() {
|
||||
</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">
|
||||
<Star className="w-4 h-4 text-yellow-500" />
|
||||
<span>1.2k stars on GitHub</span>
|
||||
@@ -92,7 +92,7 @@ export default function Hero() {
|
||||
<span>500+ downloads</span>
|
||||
<span>•</span>
|
||||
<span>50+ contributors</span>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
|
||||
@@ -31,16 +31,16 @@ export default function HowItWorks() {
|
||||
]
|
||||
|
||||
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="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">
|
||||
Get started in minutes with our simple, privacy-first approach to meeting notes.
|
||||
</p>
|
||||
</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) => (
|
||||
<Card key={index} className="bg-gray-900/50 border-gray-800 text-center">
|
||||
<CardContent className="p-8">
|
||||
@@ -55,12 +55,12 @@ export default function HowItWorks() {
|
||||
))}
|
||||
</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">
|
||||
"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>
|
||||
<cite className="text-blue-400 font-semibold">– Open-Source Contributor</cite>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
|
||||
@@ -9,8 +9,7 @@ export default function Pricing() {
|
||||
<div className="text-center mb-16">
|
||||
<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">
|
||||
No subscriptions, no hidden fees, no premium tiers. Just bring your own API keys and enjoy unlimited
|
||||
AI-powered meeting notes.
|
||||
No subscriptions, no hidden fees, no premium tiers.
|
||||
</p>
|
||||
</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">
|
||||
✨ COMPLETELY FREE FOREVER
|
||||
</div>
|
||||
<CardContent className="p-8 mt-8">
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex items-center justify-center mb-4">
|
||||
<DollarSign className="w-16 h-16 text-green-400" />
|
||||
<span className="text-6xl font-bold text-green-400">0</span>
|
||||
</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>
|
||||
|
||||
<CardContent className="pt-16 pb-12 px-12 text-center">
|
||||
<div className="mb-8">
|
||||
<div className="text-6xl font-bold mb-4 text-green-400">$0</div>
|
||||
<div className="text-2xl text-gray-300">Forever and always</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>
|
||||
<h4 className="text-xl font-bold mb-4 flex items-center">
|
||||
<Shield className="w-5 h-5 text-blue-400 mr-2" />
|
||||
Core Features
|
||||
</h4>
|
||||
<ul className="space-y-3">
|
||||
<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>
|
||||
<h3 className="text-2xl font-bold mb-6 text-white">What's Included</h3>
|
||||
<ul className="space-y-4 text-left">
|
||||
<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">Unlimited meeting recordings</span>
|
||||
</li>
|
||||
<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">AI-enhanced notes</span>
|
||||
<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">Real-time AI transcription</span>
|
||||
</li>
|
||||
<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">Local storage & privacy</span>
|
||||
<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">AI-enhanced meeting summaries</span>
|
||||
</li>
|
||||
<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">Unlimited meetings</span>
|
||||
<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">Complete data privacy (local storage)</span>
|
||||
</li>
|
||||
<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">Search & export</span>
|
||||
<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">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>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-xl font-bold mb-4 flex items-center">
|
||||
<Key className="w-5 h-5 text-yellow-400 mr-2" />
|
||||
Your API Keys
|
||||
</h4>
|
||||
<ul className="space-y-3">
|
||||
<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">Bring your own OpenAI key</span>
|
||||
</li>
|
||||
<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">~$0.20/hour usage cost</span>
|
||||
</li>
|
||||
<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">Full control over your data</span>
|
||||
</li>
|
||||
<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">No middleman or markup</span>
|
||||
</li>
|
||||
<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">Stored securely on-device</span>
|
||||
</li>
|
||||
</ul>
|
||||
<h3 className="text-2xl font-bold mb-6 text-white">How It Works</h3>
|
||||
<div className="space-y-6 text-left">
|
||||
<div className="flex items-start space-x-3">
|
||||
<Key className="w-6 h-6 text-blue-400 flex-shrink-0 mt-1" />
|
||||
<div>
|
||||
<h4 className="font-semibold text-white mb-1">Bring Your Own API Keys</h4>
|
||||
<p className="text-gray-300 text-sm">
|
||||
Use your OpenAI API key. Pay only for what you use, directly to the providers.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-3">
|
||||
<Shield className="w-6 h-6 text-green-400 flex-shrink-0 mt-1" />
|
||||
<div>
|
||||
<h4 className="font-semibold text-white mb-1">Your Keys, Your Control</h4>
|
||||
<p className="text-gray-300 text-sm">
|
||||
API keys are stored securely on your device. We never see or store your credentials.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-3">
|
||||
<DollarSign className="w-6 h-6 text-purple-400 flex-shrink-0 mt-1" />
|
||||
<div>
|
||||
<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 className="bg-gray-900/50 rounded-lg p-6 mb-8">
|
||||
<h4 className="text-lg font-bold mb-3 text-center">💰 Cost Breakdown</h4>
|
||||
<div className="grid grid-cols-2 gap-4 text-center">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-green-400">$0</div>
|
||||
<div className="text-sm text-gray-400">App Cost</div>
|
||||
<div className="bg-gray-900/50 rounded-xl p-6 mb-8">
|
||||
<h4 className="text-xl font-bold mb-3 text-yellow-400">Compare to Alternatives</h4>
|
||||
<div className="grid md:grid-cols-4 gap-4 text-sm">
|
||||
<div className="text-center">
|
||||
<div className="font-semibold text-white">Meetingnotes</div>
|
||||
<div className="text-green-400">$0 + API costs</div>
|
||||
<div className="text-gray-400">~$0.20/hour</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-blue-400">~$0.20</div>
|
||||
<div className="text-sm text-gray-400">Per Hour (OpenAI)</div>
|
||||
<div className="text-center">
|
||||
<div className="font-semibold text-white">Granola</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 className="mt-4 text-center text-sm text-gray-400">
|
||||
<strong>Example:</strong> 10 hours of meetings = ~$2.00 total
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button size="lg" className="bg-green-600 hover:bg-green-700 text-lg px-8 py-4" asChild>
|
||||
<a href="/download">
|
||||
Download Free Now
|
||||
</a>
|
||||
<Button size="lg" className="bg-green-600 hover:bg-green-700 text-lg px-8 py-4">
|
||||
Download Free Now
|
||||
</Button>
|
||||
|
||||
<p className="text-sm text-gray-400 mt-4">
|
||||
@@ -121,4 +135,4 @@ export default function Pricing() {
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -37,7 +37,7 @@ export default function DownloadPage() {
|
||||
<h2 className="text-2xl font-bold">Download Now</h2>
|
||||
</div>
|
||||
<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>
|
||||
<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">
|
||||
|
||||
Reference in New Issue
Block a user