68 lines
2.6 KiB
TypeScript
68 lines
2.6 KiB
TypeScript
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 OpenAI API key (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>
|
||
)
|
||
}
|