79 lines
3.5 KiB
TypeScript
79 lines
3.5 KiB
TypeScript
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 & system audio and uses OpenAI 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>
|
|
)
|
|
}
|