feat: add landing page download page + fixes (#1)

This commit is contained in:
Owen Gretzinger
2025-07-11 23:27:03 -04:00
committed by GitHub
parent 78393af91c
commit 5247f11ba9
8 changed files with 4910 additions and 129 deletions
+10 -6
View File
@@ -41,13 +41,17 @@ export default function Community() {
</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 mb-12">
<Button size="lg" className="bg-gray-800 hover:bg-gray-700 border border-gray-600"> <Button size="lg" className="bg-gray-800 hover:bg-gray-700 border border-gray-600" asChild>
<Star className="w-5 h-5 mr-2" /> <a href="https://github.com/owengretzinger/meetingnotes">
Star on GitHub <Star className="w-5 h-5 mr-2" />
Star on GitHub
</a>
</Button> </Button>
<Button size="lg" className="bg-blue-600 hover:bg-blue-700"> <Button size="lg" className="bg-blue-600 hover:bg-blue-700" asChild>
<GitFork className="w-5 h-5 mr-2" /> <a href="https://github.com/owengretzinger/meetingnotes/fork">
Fork & Contribute <GitFork className="w-5 h-5 mr-2" />
Fork & Contribute
</a>
</Button> </Button>
</div> </div>
+11 -6
View File
@@ -17,18 +17,23 @@ export default function FinalCTA() {
</p> </p>
<div className="flex flex-col sm:flex-row gap-6 justify-center mb-12"> <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"> <Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-lg px-8 py-4 group" asChild>
<Download className="w-5 h-5 mr-2" /> <a href="/download">
Download for macOS <Download className="w-5 h-5 mr-2" />
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" /> Download for macOS
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
</a>
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
size="lg" size="lg"
className="border-gray-600 text-gray-300 hover:bg-gray-800 text-lg px-8 py-4 bg-transparent" className="border-gray-600 text-gray-300 hover:bg-gray-800 text-lg px-8 py-4 bg-transparent"
asChild
> >
<Github className="w-5 h-5 mr-2" /> <a href="https://github.com/owengretzinger/meetingnotes">
Learn More on GitHub <Github className="w-5 h-5 mr-2" />
Learn More on GitHub
</a>
</Button> </Button>
</div> </div>
+13 -11
View File
@@ -7,23 +7,25 @@ export default function Footer() {
<div className="grid md:grid-cols-4 gap-8 mb-8"> <div className="grid md:grid-cols-4 gap-8 mb-8">
<div> <div>
<div className="flex items-center space-x-2 mb-4"> <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"> <img
<span className="text-white font-bold text-sm">MN</span> src="/logo.svg"
</div> alt="Meetingnotes logo"
className="w-8 h-8"
/>
<span className="text-xl font-bold">Meetingnotes</span> <span className="text-xl font-bold">Meetingnotes</span>
</div> </div>
<p className="text-gray-400 mb-4">Free Open-Source AI Notetaker for macOS</p> <p className="text-gray-400 mb-4">Free Open-Source AI Notetaker for macOS</p>
<div className="flex space-x-4"> <div className="flex space-x-4">
<a <a
href="https://github.com/meetingnotes/meetingnotes" href="https://github.com/owengretzinger/meetingnotes"
className="text-gray-400 hover:text-white transition-colors" className="text-gray-400 hover:text-white transition-colors"
> >
<Github className="w-5 h-5" /> <Github className="w-5 h-5" />
</a> </a>
<a href="https://twitter.com/meetingnotes" className="text-gray-400 hover:text-white transition-colors"> <a href="https://x.com/owengretzinger" className="text-gray-400 hover:text-white transition-colors">
<Twitter className="w-5 h-5" /> <Twitter className="w-5 h-5" />
</a> </a>
<a href="mailto:hello@meetingnotes.dev" className="text-gray-400 hover:text-white transition-colors"> <a href="mailto:owengretzing[email protected]" className="text-gray-400 hover:text-white transition-colors">
<Mail className="w-5 h-5" /> <Mail className="w-5 h-5" />
</a> </a>
</div> </div>
@@ -59,13 +61,13 @@ export default function Footer() {
<h4 className="font-semibold mb-4">Community</h4> <h4 className="font-semibold mb-4">Community</h4>
<ul className="space-y-2 text-gray-400"> <ul className="space-y-2 text-gray-400">
<li> <li>
<a href="https://github.com/meetingnotes/meetingnotes" className="hover:text-white transition-colors"> <a href="https://github.com/owengretzinger/meetingnotes" className="hover:text-white transition-colors">
GitHub Repo GitHub Repo
</a> </a>
</li> </li>
<li> <li>
<a <a
href="https://github.com/meetingnotes/meetingnotes/blob/main/README.md" href="https://github.com/owengretzinger/meetingnotes/blob/main/README.md"
className="hover:text-white transition-colors" className="hover:text-white transition-colors"
> >
Documentation Documentation
@@ -73,7 +75,7 @@ export default function Footer() {
</li> </li>
<li> <li>
<a <a
href="https://github.com/meetingnotes/meetingnotes/blob/main/CONTRIBUTING.md" href="https://github.com/owengretzinger/meetingnotes/blob/main/CONTRIBUTING.md"
className="hover:text-white transition-colors" className="hover:text-white transition-colors"
> >
Contribute Contribute
@@ -81,7 +83,7 @@ export default function Footer() {
</li> </li>
<li> <li>
<a <a
href="https://github.com/meetingnotes/meetingnotes/issues" href="https://github.com/owengretzinger/meetingnotes/issues"
className="hover:text-white transition-colors" className="hover:text-white transition-colors"
> >
Report Issues Report Issues
@@ -105,7 +107,7 @@ export default function Footer() {
</li> </li>
<li> <li>
<a <a
href="https://github.com/meetingnotes/meetingnotes/blob/main/LICENSE" href="https://github.com/owengretzinger/meetingnotes/blob/main/LICENSE"
className="hover:text-white transition-colors" className="hover:text-white transition-colors"
> >
LGPL-3.0 License LGPL-3.0 License
+18 -11
View File
@@ -5,12 +5,14 @@ export default function Header() {
return ( return (
<header className="border-b border-gray-800 bg-black/95 backdrop-blur-sm sticky top-0 z-50"> <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="container mx-auto px-4 py-4 flex items-center justify-between">
<div className="flex items-center space-x-2"> <a href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center"> <img
<span className="text-white font-bold text-sm">MN</span> src="/logo.svg"
</div> alt="Meetingnotes logo"
className="w-8 h-8"
/>
<span className="text-xl font-bold">Meetingnotes</span> <span className="text-xl font-bold">Meetingnotes</span>
</div> </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">
@@ -23,7 +25,7 @@ export default function Header() {
Pricing Pricing
</a> </a>
<a <a
href="https://github.com/meetingnotes/meetingnotes" href="https://github.com/owengretzinger/meetingnotes"
className="text-gray-300 hover:text-white transition-colors" className="text-gray-300 hover:text-white transition-colors"
> >
GitHub GitHub
@@ -35,13 +37,18 @@ export default function Header() {
variant="outline" variant="outline"
size="sm" size="sm"
className="border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent" className="border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent"
asChild
> >
<Github className="w-4 h-4 mr-2" /> <a href="https://github.com/owengretzinger/meetingnotes">
Star <Github className="w-4 h-4 mr-2" />
Star
</a>
</Button> </Button>
<Button size="sm" className="bg-blue-600 hover:bg-blue-700"> <Button size="sm" className="bg-blue-600 hover:bg-blue-700" asChild>
<Download className="w-4 h-4 mr-2" /> <a href="/download">
Download <Download className="w-4 h-4 mr-2" />
Download
</a>
</Button> </Button>
</div> </div>
</div> </div>
+30 -8
View File
@@ -1,11 +1,18 @@
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Download, Github, Star, Shield, Code, Zap } from "lucide-react"; import { Download, Github, Star, Shield, Code, Zap } from "lucide-react";
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() { export default function Hero() {
return ( return (
<section className="py-20 px-4 bg-gradient-to-b from-black to-gray-900"> <section className="py-20 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 <Badge
variant="secondary" variant="secondary"
className="mb-8 bg-blue-600/20 text-blue-400 border-blue-600/30" className="mb-8 bg-blue-600/20 text-blue-400 border-blue-600/30"
@@ -21,6 +28,8 @@ export default function Hero() {
Engineers Engineers
</h1> </h1>
<p className="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto leading-relaxed">
Just you and your OpenAI API key. Go crazy.
<p className="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto leading-relaxed"> <p className="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto leading-relaxed">
Just you and your OpenAI API key. Go crazy. Just you and your OpenAI API key. Go crazy.
</p> </p>
@@ -44,20 +53,22 @@ export default function Hero() {
</div> </div>
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-16"> <div className="flex flex-col sm:flex-row gap-4 justify-center mb-16">
<Button <Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-lg px-8 py-4" asChild>
size="lg" <a href="/download">
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
<Download className="w-5 h-5 mr-2" /> </a>
Download for macOS
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
size="lg" size="lg"
className="border-gray-600 text-gray-300 hover:bg-gray-800 text-lg px-8 py-4 bg-transparent" className="border-gray-600 text-gray-300 hover:bg-gray-800 text-lg px-8 py-4 bg-transparent"
asChild
> >
<Github className="w-5 h-5 mr-2" /> <a href="https://github.com/owengretzinger/meetingnotes">
View on GitHub <Github className="w-5 h-5 mr-2" />
View on GitHub
</a>
</Button> </Button>
</div> </div>
@@ -66,6 +77,11 @@ export default function Hero() {
<div className="aspect-video bg-gray-800 rounded-lg flex items-center justify-center border-2 border-dashed border-gray-600"> <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="text-center">
<div className="w-16 h-16 bg-blue-600/20 rounded-full flex items-center justify-center mx-auto mb-4"> <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"
>
<svg <svg
className="w-8 h-8 text-blue-400" className="w-8 h-8 text-blue-400"
fill="currentColor" fill="currentColor"
@@ -81,12 +97,17 @@ export default function Hero() {
<h3 className="text-xl font-semibold text-white mb-2"> <h3 className="text-xl font-semibold text-white mb-2">
Demo Video Demo Video
</h3> </h3>
<h3 className="text-xl font-semibold text-white mb-2">
Demo Video
</h3>
<p className="text-gray-400">See Meetingnotes in action</p> <p className="text-gray-400">See Meetingnotes in action</p>
</div> </div>
</div> </div>
<p className="text-sm text-gray-400 mt-4 text-center"> <p className="text-sm text-gray-400 mt-4 text-center">
Watch how Meetingnotes transcribes meetings and generates Watch how Meetingnotes transcribes meetings and generates
AI-enhanced notes in real-time AI-enhanced notes in real-time
Watch how Meetingnotes transcribes meetings and generates
AI-enhanced notes in real-time
</p> </p>
</div> </div>
</div> </div>
@@ -104,4 +125,5 @@ export default function Hero() {
</div> </div>
</section> </section>
); );
);
} }
+72 -87
View File
@@ -4,7 +4,7 @@ import { Check, DollarSign, Key, Shield } from "lucide-react"
export default function Pricing() { export default function Pricing() {
return ( return (
<section className="py-20 px-4 bg-black"> <section id="pricing" 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-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>
@@ -19,112 +19,97 @@ 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">
<CardContent className="pt-16 pb-12 px-12 text-center"> <div className="text-center mb-8">
<div className="mb-8"> <div className="flex items-center justify-center mb-4">
<div className="text-6xl font-bold mb-4 text-green-400">$0</div> <DollarSign className="w-16 h-16 text-green-400" />
<div className="text-2xl text-gray-300">Forever and always</div> <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>
</div> </div>
<div className="grid md:grid-cols-2 gap-8 mb-12"> <div className="grid md:grid-cols-2 gap-8 mb-8">
<div> <div>
<h3 className="text-2xl font-bold mb-6 text-white">What's Included</h3> <h4 className="text-xl font-bold mb-4 flex items-center">
<ul className="space-y-4 text-left"> <Shield className="w-5 h-5 text-blue-400 mr-2" />
<li className="flex items-center space-x-3"> Core Features
<Check className="w-5 h-5 text-green-400 flex-shrink-0" /> </h4>
<span className="text-gray-200">Unlimited meeting recordings</span> <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>
</li> </li>
<li className="flex items-center space-x-3"> <li className="flex items-start space-x-3">
<Check className="w-5 h-5 text-green-400 flex-shrink-0" /> <Check className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" />
<span className="text-gray-200">Real-time AI transcription</span> <span className="text-gray-300">AI-enhanced notes</span>
</li> </li>
<li className="flex items-center space-x-3"> <li className="flex items-start space-x-3">
<Check className="w-5 h-5 text-green-400 flex-shrink-0" /> <Check className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" />
<span className="text-gray-200">AI-enhanced meeting summaries</span> <span className="text-gray-300">Local storage & privacy</span>
</li> </li>
<li className="flex items-center space-x-3"> <li className="flex items-start space-x-3">
<Check className="w-5 h-5 text-green-400 flex-shrink-0" /> <Check className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" />
<span className="text-gray-200">Complete data privacy (local storage)</span> <span className="text-gray-300">Unlimited meetings</span>
</li> </li>
<li className="flex items-center space-x-3"> <li className="flex items-start space-x-3">
<Check className="w-5 h-5 text-green-400 flex-shrink-0" /> <Check className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" />
<span className="text-gray-200">Full source code access</span> <span className="text-gray-300">Search & export</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>
<h3 className="text-2xl font-bold mb-6 text-white">How It Works</h3> <h4 className="text-xl font-bold mb-4 flex items-center">
<div className="space-y-6 text-left"> <Key className="w-5 h-5 text-yellow-400 mr-2" />
<div className="flex items-start space-x-3"> Your API Keys
<Key className="w-6 h-6 text-blue-400 flex-shrink-0 mt-1" /> </h4>
<div> <ul className="space-y-3">
<h4 className="font-semibold text-white mb-1">Bring Your Own API Keys</h4> <li className="flex items-start space-x-3">
<p className="text-gray-300 text-sm"> <Check className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" />
Use your OpenAI API key. Pay only for what you use, directly to the providers. <span className="text-gray-300">Bring your own OpenAI key</span>
</p> </li>
</div> <li className="flex items-start space-x-3">
</div> <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>
<div className="flex items-start space-x-3"> </li>
<Shield className="w-6 h-6 text-green-400 flex-shrink-0 mt-1" /> <li className="flex items-start space-x-3">
<div> <Check className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" />
<h4 className="font-semibold text-white mb-1">Your Keys, Your Control</h4> <span className="text-gray-300">Full control over your data</span>
<p className="text-gray-300 text-sm"> </li>
API keys are stored securely on your device. We never see or store your credentials. <li className="flex items-start space-x-3">
</p> <Check className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" />
</div> <span className="text-gray-300">No middleman or markup</span>
</div> </li>
<li className="flex items-start space-x-3">
<div className="flex items-start space-x-3"> <Check className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" />
<DollarSign className="w-6 h-6 text-purple-400 flex-shrink-0 mt-1" /> <span className="text-gray-300">Stored securely on-device</span>
<div> </li>
<h4 className="font-semibold text-white mb-1">Typical Costs</h4> </ul>
<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-xl p-6 mb-8"> <div className="bg-gray-900/50 rounded-lg p-6 mb-8">
<h4 className="text-xl font-bold mb-3 text-yellow-400">Compare to Alternatives</h4> <h4 className="text-lg font-bold mb-3 text-center">💰 Cost Breakdown</h4>
<div className="grid md:grid-cols-4 gap-4 text-sm"> <div className="grid grid-cols-2 gap-4 text-center">
<div className="text-center"> <div>
<div className="font-semibold text-white">Meetingnotes</div> <div className="text-2xl font-bold text-green-400">$0</div>
<div className="text-green-400">$0 + API costs</div> <div className="text-sm text-gray-400">App Cost</div>
<div className="text-gray-400">~$0.20/hour</div>
</div> </div>
<div className="text-center"> <div>
<div className="font-semibold text-white">Granola</div> <div className="text-2xl font-bold text-blue-400">~$0.20</div>
<div className="text-red-400">$18/month</div> <div className="text-sm text-gray-400">Per Hour (OpenAI)</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> </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>
<Button size="lg" className="bg-green-600 hover:bg-green-700 text-lg px-8 py-4"> <Button size="lg" className="bg-green-600 hover:bg-green-700 text-lg px-8 py-4" asChild>
Download Free Now <a href="/download">
Download Free Now
</a>
</Button> </Button>
<p className="text-sm text-gray-400 mt-4"> <p className="text-sm text-gray-400 mt-4">
+139
View File
@@ -0,0 +1,139 @@
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Download, AlertTriangle, Calendar, DollarSign, Shield, MessageSquare } from "lucide-react"
import Header from "../components/header"
export default function DownloadPage() {
return (
<div className="min-h-screen bg-black text-white">
<Header />
<div className="container mx-auto px-4 py-20">
<div className="max-w-4xl mx-auto">
<div className="grid md:grid-cols-2 gap-8 mb-12">
<Card className="bg-gray-900/50 border-gray-800">
<CardContent className="p-8">
<div className="flex items-center mb-4">
<MessageSquare className="w-8 h-8 text-blue-400 mr-3" />
<h2 className="text-2xl font-bold">Let's Talk First</h2>
</div>
<p className="text-gray-300 mb-6">
Right now I'm trying to gauge interest in Meetingnotes, so I would love to jump on a call to walk you
through the set up and hear your thoughts on it.
</p>
<Button size="lg" className="bg-blue-600 hover:bg-blue-700 w-full" asChild>
<a href="https://cal.com/owengretzinger" target="_blank" rel="noopener noreferrer">
<Calendar className="w-5 h-5 mr-2" />
Schedule a Call
</a>
</Button>
</CardContent>
</Card>
<Card className="bg-gray-900/50 border-gray-800">
<CardContent className="p-8">
<div className="flex items-center mb-4">
<Download className="w-8 h-8 text-green-400 mr-3" />
<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.
</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">
<Download className="w-5 h-5 mr-2" />
Download v1.0
</a>
</Button>
</CardContent>
</Card>
</div>
<Card className="bg-red-900/20 border-red-800/50 mb-12">
<CardContent className="p-8">
<div className="flex items-start mb-4">
<AlertTriangle className="w-8 h-8 text-red-400 mr-3 mt-1 flex-shrink-0" />
<div>
<h2 className="text-2xl font-bold text-red-400 mb-2">Important Security Notice</h2>
<p className="text-gray-300 mb-4">
I haven't paid the Apple developer fee, which means that when you download the app you might have
trouble opening it due to macOS flagging it for security issues.
</p>
<div className="bg-gray-900/50 rounded-lg p-4">
<h3 className="font-bold text-white mb-2">To open the app:</h3>
<ol className="text-gray-300 space-y-2 list-decimal list-inside">
<li>Right-click the app and select "Open"</li>
<li>Click through the security dialogue</li>
<li>Go to System Preferences → Privacy & Security</li>
<li>Scroll to the bottom and click "Open Anyway"</li>
</ol>
</div>
</div>
</div>
</CardContent>
</Card>
<div className="grid md:grid-cols-2 gap-8 mb-12">
<Card className="bg-gray-900/50 border-gray-800">
<CardContent className="p-8">
<div className="flex items-center mb-4">
<DollarSign className="w-8 h-8 text-yellow-400 mr-3" />
<h2 className="text-2xl font-bold">API Key Required</h2>
</div>
<p className="text-gray-300 mb-4">
You will need to grab an OpenAI API key to use the transcription and AI features.
</p>
<p className="text-sm text-gray-400 mb-6">
<strong>Expected cost:</strong> About $0.20/hour of meeting time
</p>
<Button variant="outline" size="lg" className="border-gray-600 text-gray-300 hover:bg-gray-800 w-full bg-transparent" asChild>
<a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer">
Get OpenAI API Key
</a>
</Button>
</CardContent>
</Card>
<Card className="bg-gray-900/50 border-gray-800">
<CardContent className="p-8">
<div className="flex items-center mb-4">
<Shield className="w-8 h-8 text-purple-400 mr-3" />
<h2 className="text-2xl font-bold">Privacy First</h2>
</div>
<p className="text-gray-300 mb-4">
Your API key and all meeting data stay on your device. Nothing is sent to our servers.
</p>
<ul className="text-sm text-gray-400 space-y-2">
<li>• API keys stored securely on-device</li>
<li>• Meeting recordings never leave your Mac</li>
<li>• No data collection or tracking</li>
<li>• Open source and transparent</li>
</ul>
</CardContent>
</Card>
</div>
<div className="text-center">
<h2 className="text-3xl font-bold mb-4">Questions?</h2>
<p className="text-gray-300 mb-8">
If you run into any issues or have questions about the setup, don't hesitate to reach out.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button size="lg" className="bg-blue-600 hover:bg-blue-700" asChild>
<a href="https://cal.com/owengretzinger" target="_blank" rel="noopener noreferrer">
<Calendar className="w-5 h-5 mr-2" />
Schedule a Call
</a>
</Button>
<Button variant="outline" size="lg" className="border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent" asChild>
<a href="mailto:[email protected]">
Contact Me
</a>
</Button>
</div>
</div>
</div>
</div>
</div>
)
}
+4617
View File
File diff suppressed because it is too large Load Diff