feat: update hero component layout and add logo assets
This commit is contained in:
@@ -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 AI—all 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 |
@@ -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 |
Reference in New Issue
Block a user