feat: update hero component layout and add logo assets

This commit is contained in:
Owen Gretzinger
2025-07-11 23:07:47 -04:00
parent 81afc9ac44
commit 746bcc4122
3 changed files with 50 additions and 12 deletions
+24 -12
View File
@@ -1,12 +1,15 @@
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"
>
Open-Source Alternative to Granola Completely Free!
</Badge>
@@ -18,9 +21,8 @@ export default function Hero() {
Engineers
</h1>
<p className="text-xl md:text-2xl text-gray-300 mb-8 max-w-[52rem] mx-auto leading-relaxed">
Meetingnotes records your meetings, creates live transcripts, and generates enhanced notes using AIall on
your device, with zero costs. Bring your OpenAI API key.
<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>
<div className="flex flex-wrap justify-center gap-6 mb-12">
@@ -42,7 +44,10 @@ 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">
<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>
@@ -61,7 +66,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"
viewBox="0 0 20 20"
>
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
@@ -69,12 +78,15 @@ export default function Hero() {
/>
</svg>
</div>
<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>
@@ -91,5 +103,5 @@ export default function Hero() {
</div>
</div>
</section>
)
);
}