Normalize banner layout on screen sizes, fix kind0 in zap flow, make only image in templates clickable

This commit is contained in:
austinkelsay 2024-04-22 11:59:20 -05:00
parent b2a6686e89
commit f258866e07
5 changed files with 25 additions and 17 deletions

View File

@ -39,16 +39,16 @@ const HeroBanner = () => {
quality={100} quality={100}
className='opacity-70' className='opacity-70'
/> />
<div className="absolute text-center text-white text-xl h-full flex flex-col justify-evenly"> <div className="max-mob:min-w-full max-tab:min-w-[38%] min-w-[35%] absolute text-center text-white text-xl h-full flex flex-col justify-evenly">
<p className='text-2xl md:text-3xl lg:text-4xl xl:text-5xl'>Learn how to code</p> <p className='text-xl md:text-3xl lg:text-4xl xl:text-5xl'>Learn how to code</p>
<p className='text-2xl md:text-3xl lg:text-4xl xl:text-5xl'> <p className='text-xl md:text-3xl lg:text-4xl xl:text-5xl'>
Build{' '} Build{' '}
<span className={`inline-block w-[35%] ${isFlipping ? 'flip-enter-active' : ''} ${getColorClass(options[currentOption])}`}> <span className={`inline-block w-[50%] ${isFlipping ? 'flip-enter-active' : ''} ${getColorClass(options[currentOption])}`}>
{options[currentOption]} {options[currentOption]}
</span> </span>
{' '}apps {' '}Apps
</p> </p>
<p className='text-2xl md:text-3xl lg:text-4xl xl:text-5xl'>Become a Bitcoin developer</p> <p className='text-xl md:text-3xl lg:text-4xl xl:text-5xl'>Become a developer</p>
</div> </div>
</div> </div>

View File

@ -40,10 +40,13 @@ const CourseTemplate = (course) => {
return ( return (
<div <div
onClick={() => router.push(`/details/${course.id}`)}
className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md" className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md"
> >
<div className="relative w-full h-0" style={{ paddingBottom: "56.25%" }}> <div
onClick={() => router.push(`/details/${course.id}`)}
className="relative w-full h-0 hover:opacity-80 transition-opacity duration-300"
style={{ paddingBottom: "56.25%"}}
>
<Image <Image
alt="course thumbnail" alt="course thumbnail"
src={returnImageProxy(course.image)} src={returnImageProxy(course.image)}

View File

@ -40,10 +40,14 @@ const ResourceTemplate = (resource) => {
return ( return (
<div <div
onClick={() => router.push(`/details/${resource.id}`)}
className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md" className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md"
> >
<div className="relative w-full h-0" style={{ paddingBottom: "56.25%" }}> {/* Wrap the image in a div with a relative class with a padding-bottom of 56.25% representing the aspect ratio of 16:9 */}
<div
onClick={() => router.push(`/details/${resource.id}`)}
className="relative w-full h-0 hover:opacity-80 transition-opacity duration-300"
style={{ paddingBottom: "56.25%"}}
>
<Image <Image
alt="resource thumbnail" alt="resource thumbnail"
src={returnImageProxy(resource.image)} src={returnImageProxy(resource.image)}

View File

@ -40,10 +40,13 @@ const WorkshopTemplate = (workshop) => {
return ( return (
<div <div
onClick={() => router.push(`/details/${workshop.id}`)}
className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md" className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md"
> >
<div className="relative w-full h-0" style={{ paddingBottom: "56.25%" }}> <div
onClick={() => router.push(`/details/${workshop.id}`)}
className="relative w-full h-0 hover:opacity-80 transition-opacity duration-300"
style={{ paddingBottom: "56.25%"}}
>
<Image <Image
alt="workshop thumbnail" alt="workshop thumbnail"
src={returnImageProxy(workshop.image)} src={returnImageProxy(workshop.image)}

View File

@ -92,11 +92,9 @@ export function useNostr() {
return; return;
} }
const profile = kind0[0]; if (kind0.lud16) {
const lud16Username = kind0.lud16.split('@')[0];
if (profile.lud16) { const lud16Domain = kind0.lud16.split('@')[1];
const lud16Username = profile.lud16.split('@')[0];
const lud16Domain = profile.lud16.split('@')[1];
const lud16Url = `https://${lud16Domain}/.well-known/lnurlp/${lud16Username}`; const lud16Url = `https://${lud16Domain}/.well-known/lnurlp/${lud16Username}`;
try { try {