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>
)
);
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 358 KiB

+26
View File
@@ -0,0 +1,26 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.5" y="1.5" width="13" height="13" rx="2.52918" fill="url(#paint0_linear_1_57)"/>
<path d="M3.9375 11.8278V4.20832L4.08194 3.79304L4.71389 3.50415H9.60694L12.0264 5.92359V11.6472L11.8278 12.2792L10.925 12.6222H4.71389L4.08194 12.3694L3.9375 11.8278Z" fill="url(#paint1_linear_1_57)"/>
<path d="M9.58888 5.05695V3.61251L9.69722 3.54028L12.0264 5.99584H10.6542L9.93194 5.76112L9.58888 5.05695Z" fill="url(#paint2_linear_1_57)"/>
<path d="M10.7625 12.6583H4.91249" stroke="black" stroke-width="0.0361111"/>
<path d="M12.0444 5.83336V11.575C12.0444 12.1733 11.5594 12.6584 10.9611 12.6584H4.89444C4.29614 12.6584 3.81111 12.1733 3.81111 11.575V4.60558C3.81111 4.00727 4.29614 3.52225 4.89444 3.52225H9.71528" stroke="black" stroke-width="0.361111"/>
<path d="M9.55276 3.34167V4.94862C9.55276 5.54693 10.0378 6.03195 10.6361 6.03195H12.2189" stroke="black" stroke-width="0.361111"/>
<path d="M9.60693 3.46805L12.0986 5.95971" stroke="black" stroke-width="0.361111"/>
<ellipse cx="6.39306" cy="7.81947" rx="0.4875" ry="0.686111" fill="#0F0F11"/>
<ellipse cx="9.53473" cy="7.81947" rx="0.4875" ry="0.686111" fill="#0F0F11"/>
<path d="M6.50139 9.58891C7.09722 10.3834 8.75833 10.3292 9.33611 9.5528" stroke="#0E0E10" stroke-width="0.433333" stroke-linecap="round"/>
<defs>
<linearGradient id="paint0_linear_1_57" x1="8" y1="1.5" x2="8" y2="14.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#83E3FE"/>
<stop offset="1" stop-color="#36AAFD"/>
</linearGradient>
<linearGradient id="paint1_linear_1_57" x1="4.15417" y1="3.99165" x2="11.5931" y2="12.4778" gradientUnits="userSpaceOnUse">
<stop stop-color="#FEFCFC"/>
<stop offset="1" stop-color="#EDF0F2"/>
</linearGradient>
<linearGradient id="paint2_linear_1_57" x1="9.58888" y1="3.75695" x2="12.0444" y2="6.03195" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFBE09"/>
<stop offset="1" stop-color="#DF7621"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB