Skip to content

Old hero banner test #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Old hero banner test #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions src/components/button/DownloadButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,15 @@ function DownloadButton() {
return (
<a
onClick={() => handleButtonClick(href)}
className="text-white font-semibold hover:underline"
className="flex py-3 px-4 gap-3 rounded-md items-center bg-yellow-300 hover:bg-yellow-400 active:bg-yellow-500 w-fit"
href={href}
>
Download without Muse Hub
<div className="flex items-center gap-4">
<span className="icon icon-import"></span>
<p className="">
<span className="font-semibold">Download Audacity {audacityReleases.version}</span><br />
<span className="font-light">Installs with no extras</span></p>
</div>
</a>
);
}
Expand Down
10 changes: 4 additions & 6 deletions src/components/button/DownloadMuseHubButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,16 +45,14 @@ function DownloadMuseHubButton() {
return (
<a
onClick={() => handleButtonClick(href)}
className="flex py-3 px-4 gap-3 rounded-md justify-center bg-yellow-300 hover:bg-yellow-400 active:bg-yellow-500 w-fit"
className="flex py-3 px-4 gap-3 rounded-md items-center bg-white hover:bg-gray-200 active:bg-yellow-500 w-fit"
href={href}
>
<span className="icon icon-import"></span>
<p>
<span className="font-semibold">
Download Audacity {audacityReleases.version}
</span>
<br />
{false && <span className="font-light text-s">via MuseHub</span>}
<span className="font-semibold">
Audacity + free effects</span><br/>
<span className="font-light text-s">via MuseHub Installer</span>
</p>
</a>
);
Expand Down
14 changes: 7 additions & 7 deletions src/components/homepage/HeroBanner.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,25 @@ import DownloadMuseHubButton from "../button/DownloadMuseHubButton";
class="grid grid-cols-12 max-w-screen-lg mx-6 sm:mx-16 xl:mx-auto py-8 md:py-16 sm:py-12 gap-6 md:gap-0"
>
<div
class="col-span-12 mx-2 md:mx-0 text-center md:text-left md:col-span-5 flex flex-col gap-4 md:gap-8 justify-center"
class="col-span-12 mx-2 md:mx-0 text-center md:text-left md:col-span-7 flex flex-col gap-4 md:gap-8 justify-center"
>
<h1 class="leading-tight mt-2 text-white">
Audacity is the world's most popular audio editing and recording app
</h1>

<div class="flex flex-col md:w-fit gap-4 items-center md:items-start">
<DownloadMuseHubButton client:load />
<noscript>
<DownloadMuseHubButton client:load />
</noscript>
<div class="flex md:w-fit gap-4 items-center md:items-start">
<DownloadButton client:load />
<noscript>
<DownloadButton client:load />
</noscript>
<DownloadMuseHubButton client:load />
<noscript>
<DownloadMuseHubButton client:load />
</noscript>
</div>
</div>
<div
class="col-span-12 md:col-start-7 md:col-span-7 flex items-center justify-center mx-4"
class="col-span-12 md:col-start-8 md:col-span-6 flex items-center justify-center mx-4"
>
<img
alt="A laptop showing the Audacity application"
Expand Down