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

landing-page/app/components/community.tsx

@@ -41,13 +41,17 @@ export default function Community() {
         </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 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
+            </a>
           </Button>
-          <Button size="lg" className="bg-blue-600 hover:bg-blue-700">
-            <GitFork className="w-5 h-5 mr-2" />
-            Fork & Contribute
+          <Button size="lg" className="bg-blue-600 hover:bg-blue-700" asChild>
+            <a href="https://github.com/owengretzinger/meetingnotes/fork">
+              <GitFork className="w-5 h-5 mr-2" />
+              Fork & Contribute
+            </a>
           </Button>
         </div>
 

landing-page/app/components/final-cta.tsx

@@ -17,18 +17,23 @@ export default function FinalCTA() {
         </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 size="lg" className="bg-blue-600 hover:bg-blue-700 text-lg px-8 py-4 group" asChild>
+            <a href="/download">
+              <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" />
+            </a>
           </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"
+            asChild
           >
-            <Github className="w-5 h-5 mr-2" />
-            Learn More on GitHub
+            <a href="https://github.com/owengretzinger/meetingnotes">
+              <Github className="w-5 h-5 mr-2" />
+              Learn More on GitHub
+            </a>
           </Button>
         </div>
 

landing-page/app/components/footer.tsx

@@ -7,23 +7,25 @@ export default function Footer() {
         <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>
+              <img
+                src="/logo.svg"
+                alt="Meetingnotes logo"
+                className="w-8 h-8"
+              />
               <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"
+                href="https://github.com/owengretzinger/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">
+              <a href="https://x.com/owengretzinger" className="text-gray-400 hover:text-white transition-colors">
                 <Twitter className="w-5 h-5" />
               </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" />
               </a>
             </div>
@@ -59,13 +61,13 @@ export default function Footer() {
             <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">
+                <a href="https://github.com/owengretzinger/meetingnotes" className="hover:text-white transition-colors">
                   GitHub Repo
                 </a>
               </li>
               <li>
                 <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"
                 >
                   Documentation
@@ -73,7 +75,7 @@ export default function Footer() {
               </li>
               <li>
                 <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"
                 >
                   Contribute
@@ -81,7 +83,7 @@ export default function Footer() {
               </li>
               <li>
                 <a
-                  href="https://github.com/meetingnotes/meetingnotes/issues"
+                  href="https://github.com/owengretzinger/meetingnotes/issues"
                   className="hover:text-white transition-colors"
                 >
                   Report Issues
@@ -105,7 +107,7 @@ export default function Footer() {
               </li>
               <li>
                 <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"
                 >
                   LGPL-3.0 License

landing-page/app/components/header.tsx

@@ -5,12 +5,14 @@ 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>
+        <a href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
+          <img
+            src="/logo.svg"
+            alt="Meetingnotes logo"
+            className="w-8 h-8"
+          />
           <span className="text-xl font-bold">Meetingnotes</span>
-        </div>
+        </a>
 
         <nav className="hidden md:flex items-center space-x-8">
           <a href="#features" className="text-gray-300 hover:text-white transition-colors">
@@ -23,7 +25,7 @@ export default function Header() {
             Pricing
           </a>
           <a
-            href="https://github.com/meetingnotes/meetingnotes"
+            href="https://github.com/owengretzinger/meetingnotes"
             className="text-gray-300 hover:text-white transition-colors"
           >
             GitHub
@@ -35,13 +37,18 @@ export default function Header() {
             variant="outline"
             size="sm"
             className="border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent"
+            asChild
           >
-            <Github className="w-4 h-4 mr-2" />
-            Star
+            <a href="https://github.com/owengretzinger/meetingnotes">
+              <Github className="w-4 h-4 mr-2" />
+              Star
+            </a>
           </Button>
-          <Button size="sm" className="bg-blue-600 hover:bg-blue-700">
-            <Download className="w-4 h-4 mr-2" />
-            Download
+          <Button size="sm" className="bg-blue-600 hover:bg-blue-700" asChild>
+            <a href="/download">
+              <Download className="w-4 h-4 mr-2" />
+              Download
+            </a>
           </Button>
         </div>
       </div>

landing-page/app/components/hero.tsx

@@ -1,11 +1,18 @@
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 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() {
   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"
+        >
         <Badge
           variant="secondary"
           className="mb-8 bg-blue-600/20 text-blue-400 border-blue-600/30"
@@ -21,6 +28,8 @@ export default function Hero() {
           Engineers
         </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">
           Just you and your OpenAI API key. Go crazy.
         </p>
@@ -44,20 +53,22 @@ export default function Hero() {
         </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 size="lg" className="bg-blue-600 hover:bg-blue-700 text-lg px-8 py-4" asChild>
+            <a href="/download">
+              <Download className="w-5 h-5 mr-2" />
+              Download for macOS
+            </a>
           </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"
+            asChild
           >
-            <Github className="w-5 h-5 mr-2" />
-            View on GitHub
+            <a href="https://github.com/owengretzinger/meetingnotes">
+              <Github className="w-5 h-5 mr-2" />
+              View on GitHub
+            </a>
           </Button>
         </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="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"
+                  >
                   <svg
                     className="w-8 h-8 text-blue-400"
                     fill="currentColor"
@@ -81,12 +97,17 @@ export default function Hero() {
                 <h3 className="text-xl font-semibold text-white mb-2">
                   Demo Video
                 </h3>
+                <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
+              Watch how Meetingnotes transcribes meetings and generates
+              AI-enhanced notes in real-time
             </p>
           </div>
         </div>
@@ -104,4 +125,5 @@ export default function Hero() {
       </div>
     </section>
   );
+  );
 }

landing-page/app/components/pricing.tsx

@@ -4,7 +4,7 @@ import { Check, DollarSign, Key, Shield } from "lucide-react"
 
 export default function Pricing() {
   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="text-center mb-16">
           <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">
               ✨ 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>
+            <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>
               </div>
 
-              <div className="grid md:grid-cols-2 gap-8 mb-12">
+              <div className="grid md:grid-cols-2 gap-8 mb-8">
                 <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>
+                  <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>
                     </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 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>
-                    <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 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>
-                    <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 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>
-                    <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 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>
                   </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 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>
+                  <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>
                 </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.20/hour</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>
-                  <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 className="text-2xl font-bold text-blue-400">~$0.20</div>
+                    <div className="text-sm text-gray-400">Per Hour (OpenAI)</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">
-                Download Free Now
+              <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>
 
               <p className="text-sm text-gray-400 mt-4">

landing-page/app/download/page.tsx

@@ -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>
+  )
+}