Mirrors
/
riffusion-app
mirror of https://github.com/riffusion/riffusion-app.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

call to action on ToApp button

This commit is contained in:
Seth Forsgren 2022-12-13 00:02:18 -08:00
parent 4a1f379c3b
commit a9898bd85f
2 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
components/about/ToApp.tsx
View File

@ -1,21 +1,44 @@
import { useState, useEffect } from "react";
export default function ToApp() {
const [showButton, setShowButton] = useState(true);
useEffect(() => {
const handleScroll = () => {
if (window.scrollY < 2) {
setShowButton(true);
} else {
setShowButton(false);
}
};
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
return (
<>
{/* <button
type="button"
className="fixed z-90 top-8 right-8 text-white bg-gradient-to-br from-purple-600 to-sky-500 hover:bg-gradient-to-bl font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
onClick={() => window.location.href = "/"}
>
Let&apos;s Riff 🎸
</button> */}
<button
type="button"
className="fixed z-90 top-8 right-8 md:top-12 md:right-12 text-white bg-gradient-to-br from-purple-600 to-sky-500 hover:bg-gradient-to-bl w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
className="fixed z-10 top-8 right-8 md:top-12 md:right-12 text-white bg-gradient-to-br from-purple-600 to-sky-500 hover:bg-gradient-to-bl w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
onClick={() => window.location.href = "/"}
>
🎸
</button>
{showButton && (
<div className="fixed z-20 top-12 right-8 md:top-16 md:right-12 text-white bg-gradient-to-br w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-2xl">
<span className="absolute bottom-0 -right-2 bg-white text-black rounded-full p-1 pr-2 pl-2 text-xs">Try it!</span>
<button
type="button"
className="z-30 w-16 h-16 rounded-full"
onClick={() => window.location.href = "/"}
>
</button>
</div>
)}
</>
);
};

2
pages/about.tsx
View File

@ -32,7 +32,7 @@ export default function Home() {
<h3 className="font-medium italic text-xl pb-6">
(noun): riff + diffusion
</h3>
<div className="relative rounded-xl bg-layer-2 p-2 pr-16 bg-sky-50">
<div className="relative rounded-xl bg-layer-2 p-2 pr-8 bg-sky-50">
<div className="flex items-center space-x-2.5 text-sky-700">
<BsInfoCircleFill className="h-6 w-6 flex-shrink-0" />
<div>