95 lines
3.6 KiB
TypeScript
95 lines
3.6 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.",
|
|
image: "/transcript.png",
|
|
},
|
|
{
|
|
icon: <Lightbulb className="w-8 h-8 text-yellow-400" />,
|
|
title: "AI-Enhanced Notes",
|
|
description:
|
|
"Generates summaries from transcripts plus your manual notes, powered by OpenAI.",
|
|
image: "/notes.png",
|
|
},
|
|
{
|
|
icon: <Settings className="w-8 h-8 text-green-400" />,
|
|
title: "Customization & Privacy",
|
|
description:
|
|
"Edit the system prompt and bring your own API key. Everything is stored locally.",
|
|
image: "/settings.png",
|
|
},
|
|
{
|
|
icon: <FolderOpen className="w-8 h-8 text-purple-400" />,
|
|
title: "Easy Management",
|
|
description:
|
|
"Search, delete, and copy your notes & transcripts, and auto-update the app.",
|
|
image: "/search.png",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section id="features" className="py-6 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-1">
|
|
<div className="flex items-start space-x-4">
|
|
<div className="flex-shrink-0">{feature.icon}</div>
|
|
<h3 className="text-2xl font-bold mb-3 text-white">
|
|
{feature.title}
|
|
</h3>
|
|
</div>
|
|
<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"
|
|
/>
|
|
</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, AI chat for questions, and more
|
|
integrations (email, Slack).
|
|
</p>
|
|
<p className="text-blue-400 text-center font-semibold">
|
|
<a
|
|
href="https://github.com/owengretzinger/meetingnotes"
|
|
target="_blank"
|
|
className="text-blue-400 hover:text-blue-300 underline transition-colors"
|
|
>
|
|
Contribute on GitHub to help build these features!
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|