feat: add landing page
This commit is contained in:
Owen Gretzinger
@@ -0,0 +1,68 @@
|
||||
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>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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" />
|
||||
<h3 className="text-2xl font-bold mb-2">1.2k</h3>
|
||||
<p className="text-gray-300">GitHub Stars</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gray-900/50 border-gray-800 text-center">
|
||||
<CardContent className="p-8">
|
||||
<GitFork className="w-12 h-12 text-blue-400 mx-auto mb-4" />
|
||||
<h3 className="text-2xl font-bold mb-2">180</h3>
|
||||
<p className="text-gray-300">Forks</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gray-900/50 border-gray-800 text-center">
|
||||
<CardContent className="p-8">
|
||||
<Users className="w-12 h-12 text-green-400 mx-auto mb-4" />
|
||||
<h3 className="text-2xl font-bold mb-2">50+</h3>
|
||||
<p className="text-gray-300">Contributors</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</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">
|
||||
<Star className="w-5 h-5 mr-2" />
|
||||
Star on GitHub
|
||||
</Button>
|
||||
<Button size="lg" className="bg-blue-600 hover:bg-blue-700">
|
||||
<GitFork className="w-5 h-5 mr-2" />
|
||||
Fork & Contribute
|
||||
</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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Mic, Lightbulb, Settings, FolderOpen } from "lucide-react"
|
||||
|
||||
export default function Features() {
|
||||
const features = [
|
||||
{
|
||||
icon: <Mic className="w-8 h-8 text-blue-400" />,
|
||||
title: "Live Transcription",
|
||||
description:
|
||||
"Records mic and system audio using Deepgram for real-time transcripts. No meeting bots required—transcribe directly from your computer's audio.",
|
||||
image: "/placeholder.svg?height=200&width=300",
|
||||
},
|
||||
{
|
||||
icon: <Lightbulb className="w-8 h-8 text-yellow-400" />,
|
||||
title: "AI-Enhanced Notes",
|
||||
description:
|
||||
"Generates summaries and highlights from transcripts plus your manual notes, powered by OpenAI. Get intelligent insights from every meeting.",
|
||||
image: "/placeholder.svg?height=200&width=300",
|
||||
},
|
||||
{
|
||||
icon: <Settings className="w-8 h-8 text-green-400" />,
|
||||
title: "Customization & Privacy",
|
||||
description:
|
||||
"Edit system prompts, add personal blurbs, and store everything locally. Use your own API keys for complete control and privacy.",
|
||||
image: "/placeholder.svg?height=200&width=300",
|
||||
},
|
||||
{
|
||||
icon: <FolderOpen className="w-8 h-8 text-purple-400" />,
|
||||
title: "Easy Management",
|
||||
description:
|
||||
"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">
|
||||
<div className="container mx-auto">
|
||||
<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 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">
|
||||
<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>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<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).
|
||||
</p>
|
||||
<p className="text-blue-400 text-center font-semibold">Contribute on GitHub to help build these features!</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Download, Github, ArrowRight } from "lucide-react"
|
||||
|
||||
export default function FinalCTA() {
|
||||
return (
|
||||
<section className="py-20 px-4 bg-gradient-to-b from-black to-gray-900">
|
||||
<div className="container mx-auto text-center">
|
||||
<h2 className="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
|
||||
Ready for Smarter,
|
||||
<br />
|
||||
Free Meeting Notes?
|
||||
</h2>
|
||||
|
||||
<p className="text-xl md:text-2xl text-gray-300 mb-12 max-w-3xl mx-auto leading-relaxed">
|
||||
Download Meetingnotes today and experience AI-powered notes without the cost. It's open source, so make it
|
||||
your own.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-6 justify-center mb-12">
|
||||
<Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-lg px-8 py-4 group">
|
||||
<Download className="w-5 h-5 mr-2" />
|
||||
Download for macOS
|
||||
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="border-gray-600 text-gray-300 hover:bg-gray-800 text-lg px-8 py-4 bg-transparent"
|
||||
>
|
||||
<Github className="w-5 h-5 mr-2" />
|
||||
Learn More on GitHub
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto text-left">
|
||||
<div className="bg-gray-900/50 rounded-xl p-6 border border-gray-800">
|
||||
<h3 className="text-xl font-bold mb-3 text-green-400">100% Free Forever</h3>
|
||||
<p className="text-gray-300">
|
||||
No hidden costs, no subscriptions, no premium tiers. Just free, powerful meeting notes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-900/50 rounded-xl p-6 border border-gray-800">
|
||||
<h3 className="text-xl font-bold mb-3 text-blue-400">Privacy First</h3>
|
||||
<p className="text-gray-300">
|
||||
Your data never leaves your device. Complete control over your meeting notes and transcripts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-900/50 rounded-xl p-6 border border-gray-800">
|
||||
<h3 className="text-xl font-bold mb-3 text-purple-400">Open Source</h3>
|
||||
<p className="text-gray-300">
|
||||
Transparent, customizable, and community-driven. Contribute and help shape the future.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
import { Github, Twitter, Mail, Heart } from "lucide-react"
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="bg-black border-t border-gray-800 py-12 px-4">
|
||||
<div className="container mx-auto">
|
||||
<div className="grid md:grid-cols-4 gap-8 mb-8">
|
||||
<div>
|
||||
<div className="flex items-center space-x-2 mb-4">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold text-sm">MN</span>
|
||||
</div>
|
||||
<span className="text-xl font-bold">Meetingnotes</span>
|
||||
</div>
|
||||
<p className="text-gray-400 mb-4">Free Open-Source AI Notetaker for macOS</p>
|
||||
<div className="flex space-x-4">
|
||||
<a
|
||||
href="https://github.com/meetingnotes/meetingnotes"
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
<Github className="w-5 h-5" />
|
||||
</a>
|
||||
<a href="https://twitter.com/meetingnotes" className="text-gray-400 hover:text-white transition-colors">
|
||||
<Twitter className="w-5 h-5" />
|
||||
</a>
|
||||
<a href="mailto:[email protected]" className="text-gray-400 hover:text-white transition-colors">
|
||||
<Mail className="w-5 h-5" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4">Product</h4>
|
||||
<ul className="space-y-2 text-gray-400">
|
||||
<li>
|
||||
<a href="#features" className="hover:text-white transition-colors">
|
||||
Features
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#how-it-works" className="hover:text-white transition-colors">
|
||||
How it Works
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/download" className="hover:text-white transition-colors">
|
||||
Download
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/changelog" className="hover:text-white transition-colors">
|
||||
Changelog
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4">Community</h4>
|
||||
<ul className="space-y-2 text-gray-400">
|
||||
<li>
|
||||
<a href="https://github.com/meetingnotes/meetingnotes" className="hover:text-white transition-colors">
|
||||
GitHub Repo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/meetingnotes/meetingnotes/blob/main/README.md"
|
||||
className="hover:text-white transition-colors"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/meetingnotes/meetingnotes/blob/main/CONTRIBUTING.md"
|
||||
className="hover:text-white transition-colors"
|
||||
>
|
||||
Contribute
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/meetingnotes/meetingnotes/issues"
|
||||
className="hover:text-white transition-colors"
|
||||
>
|
||||
Report Issues
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4">Legal</h4>
|
||||
<ul className="space-y-2 text-gray-400">
|
||||
<li>
|
||||
<a href="/privacy" className="hover:text-white transition-colors">
|
||||
Privacy Policy
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/terms" className="hover:text-white transition-colors">
|
||||
Terms of Service
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/meetingnotes/meetingnotes/blob/main/LICENSE"
|
||||
className="hover:text-white transition-colors"
|
||||
>
|
||||
LGPL-3.0 License
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/contact" className="hover:text-white transition-colors">
|
||||
Contact
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
|
||||
<p className="text-gray-400 text-sm mb-4 md:mb-0">
|
||||
Copyright © Owen Gretzinger {new Date().getFullYear()}. Licensed under LGPL-3.0 License. All rights
|
||||
reserved.
|
||||
</p>
|
||||
<div className="flex items-center space-x-2 text-gray-400 text-sm">
|
||||
<span>Created by Owen Gretzinger with</span>
|
||||
<Heart className="w-4 h-4 text-red-500" />
|
||||
<span>for the community</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Github, Download } from "lucide-react"
|
||||
|
||||
export default function Header() {
|
||||
return (
|
||||
<header className="border-b border-gray-800 bg-black/95 backdrop-blur-sm sticky top-0 z-50">
|
||||
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold text-sm">MN</span>
|
||||
</div>
|
||||
<span className="text-xl font-bold">Meetingnotes</span>
|
||||
</div>
|
||||
|
||||
<nav className="hidden md:flex items-center space-x-8">
|
||||
<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">
|
||||
How it Works
|
||||
</a>
|
||||
<a href="#pricing" className="text-gray-300 hover:text-white transition-colors">
|
||||
Pricing
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/meetingnotes/meetingnotes"
|
||||
className="text-gray-300 hover:text-white transition-colors"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent"
|
||||
>
|
||||
<Github className="w-4 h-4 mr-2" />
|
||||
Star
|
||||
</Button>
|
||||
<Button size="sm" className="bg-blue-600 hover:bg-blue-700">
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Download
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
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">
|
||||
<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!
|
||||
</Badge>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-bold mb-6 pb-2 bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
|
||||
The Free, Open-Source
|
||||
<br />
|
||||
AI Notetaker for Busy
|
||||
<br />
|
||||
Engineers
|
||||
</h1>
|
||||
|
||||
<p className="text-xl md:text-2xl text-gray-300 mb-8 max-w-[52rem] mx-auto leading-relaxed">
|
||||
Meetingnotes records your meetings, creates live transcripts, and generates enhanced notes using AI—all on
|
||||
your device, with zero costs. Bring your OpenAI API key.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-6 mb-12">
|
||||
<div className="flex items-center space-x-2 text-green-400">
|
||||
<Zap className="w-5 h-5" />
|
||||
<span className="font-semibold">100% Free</span>
|
||||
<span className="text-gray-400">No subscriptions, ever</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 text-blue-400">
|
||||
<Shield className="w-5 h-5" />
|
||||
<span className="font-semibold">100% Private</span>
|
||||
<span className="text-gray-400">All data stored locally</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 text-purple-400">
|
||||
<Code className="w-5 h-5" />
|
||||
<span className="font-semibold">100% Open Source</span>
|
||||
<span className="text-gray-400">Contribute on GitHub</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-16">
|
||||
<Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-lg px-8 py-4">
|
||||
<Download className="w-5 h-5 mr-2" />
|
||||
Download for macOS
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="border-gray-600 text-gray-300 hover:bg-gray-800 text-lg px-8 py-4 bg-transparent"
|
||||
>
|
||||
<Github className="w-5 h-5 mr-2" />
|
||||
View on GitHub
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="bg-gray-900/50 rounded-xl p-8 border border-gray-800">
|
||||
<div className="aspect-video bg-gray-800 rounded-lg flex items-center justify-center border-2 border-dashed border-gray-600">
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-blue-600/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-8 h-8 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-white mb-2">Demo Video</h3>
|
||||
<p className="text-gray-400">See Meetingnotes in action</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-gray-400 mt-4 text-center">
|
||||
Watch how Meetingnotes transcribes meetings and generates AI-enhanced notes in real-time
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<span>•</span>
|
||||
<span>500+ downloads</span>
|
||||
<span>•</span>
|
||||
<span>50+ contributors</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Download, Key, Play, FileText } from "lucide-react"
|
||||
|
||||
export default function HowItWorks() {
|
||||
const steps = [
|
||||
{
|
||||
number: "01",
|
||||
icon: <Download className="w-6 h-6" />,
|
||||
title: "Download & Setup",
|
||||
description:
|
||||
"Download and install on macOS. Enter your Deepgram and OpenAI API keys (stored securely on-device).",
|
||||
},
|
||||
{
|
||||
number: "02",
|
||||
icon: <Play className="w-6 h-6" />,
|
||||
title: "Start Recording",
|
||||
description: "Start a meeting—Meetingnotes records audio and shows a live transcript in real-time.",
|
||||
},
|
||||
{
|
||||
number: "03",
|
||||
icon: <FileText className="w-6 h-6" />,
|
||||
title: "Add Your Notes",
|
||||
description: "Add your own notes during the call to complement the automatic transcription.",
|
||||
},
|
||||
{
|
||||
number: "04",
|
||||
icon: <Key className="w-6 h-6" />,
|
||||
title: "Get AI Summary",
|
||||
description: "End the meeting—AI generates enhanced notes instantly. Edit, copy, or search later.",
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<section id="how-it-works" 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">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">
|
||||
{steps.map((step, index) => (
|
||||
<Card key={index} className="bg-gray-900/50 border-gray-800 text-center">
|
||||
<CardContent className="p-8">
|
||||
<div className="text-4xl font-bold text-blue-400 mb-4">{step.number}</div>
|
||||
<div className="w-12 h-12 bg-blue-600/20 rounded-full flex items-center justify-center mx-auto mb-4 text-blue-400">
|
||||
{step.icon}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3">{step.title}</h3>
|
||||
<p className="text-gray-300 leading-relaxed">{step.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<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!"
|
||||
</blockquote>
|
||||
<cite className="text-blue-400 font-semibold">– Open-Source Contributor</cite>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Check, DollarSign, Key, Shield } from "lucide-react"
|
||||
|
||||
export default function Pricing() {
|
||||
return (
|
||||
<section 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">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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<Card className="bg-gradient-to-r from-green-600/20 to-blue-600/20 border-2 border-green-500/50 relative overflow-hidden">
|
||||
<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="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-12">
|
||||
<div>
|
||||
<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-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-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-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-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>
|
||||
<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 Deepgram and OpenAI API keys. 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.28/hour using Deepgram Nova-3 and GPT-4o-mini. Pay only for what you use, no markup or
|
||||
subscriptions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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.28/hour</div>
|
||||
</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">Limited features</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">Usage limits</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
No credit card required • No account needed • No data collection
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import { Shield, Laptop, Lock } from "lucide-react"
|
||||
|
||||
export default function Privacy() {
|
||||
const platforms = [
|
||||
{ name: "macOS", logo: "/placeholder.svg?height=40&width=40" },
|
||||
{ name: "Google Meet", logo: "/placeholder.svg?height=40&width=40" },
|
||||
{ name: "Zoom", logo: "/placeholder.svg?height=40&width=40" },
|
||||
{ name: "Microsoft Teams", logo: "/placeholder.svg?height=40&width=40" },
|
||||
{ name: "Slack", logo: "/placeholder.svg?height=40&width=40" },
|
||||
]
|
||||
|
||||
return (
|
||||
<section className="py-20 px-4 bg-gray-900">
|
||||
<div className="container mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-6">Works on macOS with Full Privacy – No Bots, No Cloud</h2>
|
||||
<p className="text-xl text-gray-300 max-w-4xl mx-auto mb-8">
|
||||
Meetingnotes transcribes directly from your computer's audio. No meeting bots join your calls, and all data
|
||||
stays on your device.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap justify-center items-center gap-8 mb-16">
|
||||
{platforms.map((platform, index) => (
|
||||
<div key={index} className="flex flex-col items-center space-y-2">
|
||||
<img
|
||||
src={platform.logo || "/placeholder.svg"}
|
||||
alt={`${platform.name} logo`}
|
||||
className="w-12 h-12 rounded-lg"
|
||||
/>
|
||||
<span className="text-sm text-gray-400">{platform.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-green-600/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Shield className="w-8 h-8 text-green-400" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3">Your Data, Your Control</h3>
|
||||
<p className="text-gray-300">
|
||||
Nothing leaves your machine. All transcripts and notes are stored locally on your device.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-blue-600/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Laptop className="w-8 h-8 text-blue-400" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3">No Meeting Bots</h3>
|
||||
<p className="text-gray-300">
|
||||
Records directly from your computer's audio without joining any bots to your meetings.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-purple-600/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Lock className="w-8 h-8 text-purple-400" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3">Secure API Keys</h3>
|
||||
<p className="text-gray-300">
|
||||
Your Deepgram and OpenAI API keys are stored securely on your device, never shared.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 0%;
|
||||
--foreground: 0 0% 100%;
|
||||
--card: 0 0% 5%;
|
||||
--card-foreground: 0 0% 95%;
|
||||
--popover: 0 0% 5%;
|
||||
--popover-foreground: 0 0% 95%;
|
||||
--primary: 217 91% 60%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 0 0% 15%;
|
||||
--secondary-foreground: 0 0% 95%;
|
||||
--muted: 0 0% 15%;
|
||||
--muted-foreground: 0 0% 60%;
|
||||
--accent: 0 0% 15%;
|
||||
--accent-foreground: 0 0% 95%;
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 0 0% 20%;
|
||||
--input: 0 0% 20%;
|
||||
--ring: 217 91% 60%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Custom scrollbar for dark theme */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #111111;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #333333;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555555;
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import type React from "react"
|
||||
import type { Metadata } from "next"
|
||||
import { Inter } from "next/font/google"
|
||||
import "./globals.css"
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] })
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Meetingnotes - Free Open-Source AI Meeting Notetaker",
|
||||
description:
|
||||
"Free, open-source macOS app for AI-powered meeting notes. Transcribe, summarize, and store everything locally with complete privacy. Created by Owen Gretzinger.",
|
||||
keywords: "meeting notes, AI transcription, open source, privacy, macOS, free, Granola alternative, Owen Gretzinger",
|
||||
authors: [{ name: "Owen Gretzinger" }],
|
||||
openGraph: {
|
||||
title: "Meetingnotes - Free Open-Source AI Meeting Notetaker",
|
||||
description:
|
||||
"Free, open-source macOS app for AI-powered meeting notes. Created by Owen Gretzinger for privacy-focused professionals.",
|
||||
type: "website",
|
||||
url: "https://meetingnotes.dev",
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "Meetingnotes - Free Open-Source AI Meeting Notetaker",
|
||||
description: "Free, open-source macOS app for AI-powered meeting notes by Owen Gretzinger.",
|
||||
},
|
||||
generator: 'v0.dev'
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" className="scroll-smooth">
|
||||
<body className={`${inter.className} antialiased`}>{children}</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import Header from "./components/header"
|
||||
import Hero from "./components/hero"
|
||||
import Features from "./components/features"
|
||||
import HowItWorks from "./components/how-it-works"
|
||||
import Privacy from "./components/privacy"
|
||||
import Pricing from "./components/pricing"
|
||||
import Community from "./components/community"
|
||||
import FinalCTA from "./components/final-cta"
|
||||
import Footer from "./components/footer"
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="min-h-screen bg-black text-white">
|
||||
<Header />
|
||||
<Hero />
|
||||
<Features />
|
||||
<HowItWorks />
|
||||
<Privacy />
|
||||
<Pricing />
|
||||
<Community />
|
||||
<FinalCTA />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user