mirror of
https://github.com/jamiepine/voicebox.git
synced 2026-10-02 16:45:15 -07:00
landing: three more tutorials, mobile navbar + hero CTA fixes (#483)
- Add three tutorial cards (Danish Sofi, StinkyScrublet, mikbes) - Navbar: switch parent to flex/justify-between on mobile (grid on sm+), unhide Donate button so both CTAs sit on the right, matching desktop - Hero CTAs: keep Download and GitHub side-by-side on mobile instead of stacking vertically Co-authored-by: Claude Opus 4.7 (1M context) <[email protected]>
This commit is contained in:
co-authored by
Claude Opus 4.7
parent
3c1e8512b9
commit
da6070155e
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
@@ -88,7 +88,7 @@ export default function Home() {
|
|||||||
|
|
||||||
{/* CTAs */}
|
{/* CTAs */}
|
||||||
<div
|
<div
|
||||||
className="fade-in mt-10 flex flex-col sm:flex-row items-center justify-center gap-4"
|
className="fade-in mt-10 flex flex-row items-center justify-center gap-3 sm:gap-4"
|
||||||
style={{animationDelay: "300ms"}}
|
style={{animationDelay: "300ms"}}
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ export function Navbar() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<nav className="fixed inset-x-0 top-0 z-50 border-b border-border/50 bg-background/80 backdrop-blur-xl">
|
<nav className="fixed inset-x-0 top-0 z-50 border-b border-border/50 bg-background/80 backdrop-blur-xl">
|
||||||
<div className="mx-auto grid max-w-7xl grid-cols-3 items-center px-6 py-3">
|
<div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-3 sm:grid sm:grid-cols-3">
|
||||||
{/* Logo + wordmark */}
|
{/* Logo + wordmark */}
|
||||||
<a href="/" className="flex items-center gap-2.5 justify-self-start">
|
<a href="/" className="flex items-center gap-2.5 justify-self-start">
|
||||||
<Image
|
<Image
|
||||||
@@ -87,7 +87,7 @@ export function Navbar() {
|
|||||||
href={DONATE_URL}
|
href={DONATE_URL}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="hidden sm:flex items-center gap-2 rounded-lg border border-border/60 bg-card/60 px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground hover:border-[#FFDD00]/40"
|
className="flex items-center gap-2 rounded-lg border border-border/60 bg-card/60 px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground hover:border-[#FFDD00]/40"
|
||||||
aria-label="Donate via Buy Me a Coffee"
|
aria-label="Donate via Buy Me a Coffee"
|
||||||
>
|
>
|
||||||
<Coffee className="h-4 w-4 text-[#FFDD00]" />
|
<Coffee className="h-4 w-4 text-[#FFDD00]" />
|
||||||
|
|||||||
@@ -28,6 +28,24 @@ const TUTORIALS: (Tutorial | null)[] = [
|
|||||||
author: "Dave Swift",
|
author: "Dave Swift",
|
||||||
thumbnail: "/tutorials/kqxqjRsdD5E.jpg",
|
thumbnail: "/tutorials/kqxqjRsdD5E.jpg",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: "yu9QHqOEqqA",
|
||||||
|
title: "This FREE AI Tool Just Destroyed ElevenLabs Voice Cloning (VoiceBox)",
|
||||||
|
author: "Danish Sofi",
|
||||||
|
thumbnail: "/tutorials/yu9QHqOEqqA.jpg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "RRRBxNXgeKQ",
|
||||||
|
title: "Get Started with Voicebox: Open-Source Alternative to ElevenLabs Tutorial",
|
||||||
|
author: "StinkyScrublet",
|
||||||
|
thumbnail: "/tutorials/RRRBxNXgeKQ.jpg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "PyMx4L9mky4",
|
||||||
|
title: "Free AI Voice Generator (Clones Any Voice)",
|
||||||
|
author: "mikbes",
|
||||||
|
thumbnail: "/tutorials/PyMx4L9mky4.jpg",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
function TutorialCard({tutorial}: {tutorial: Tutorial}) {
|
function TutorialCard({tutorial}: {tutorial: Tutorial}) {
|
||||||
|
|||||||
Reference in New Issue
Block a user