minor tweaks and various improvements to UI elements

This commit is contained in:
Brandon 2023-04-12 00:02:55 -05:00
parent 76e21326e5
commit 21898d7cb7

View File

@ -7,7 +7,7 @@ const TextLink = ({href, children}: {
children: string, children: string,
}) => { }) => {
return ( return (
<Link href={href} className="text-sm align-items-center bg-neutral-200 hover:bg-neutral-900 hover:text-white border border-neutral-900 rounded-md py-[4px] px-[4px]"> <Link href={href} className="text-sm align-items-center hover:bg-neutral-900 hover:text-white border border-neutral-900 rounded-md py-[2px] px-[4px]">
{children} {children}
<ArrowUpRightIcon className="inline w-4" /> <ArrowUpRightIcon className="inline w-4" />
</Link> </Link>
@ -39,23 +39,23 @@ const Home: NextPage = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="p-4 sm:p-12 bg-neutral-900 text-white"> <div className="p-4 sm:p-12 bg-neutral-900 text-white border-t border-y border-yellow-200">
<div className="max-w-5xl flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x divide-white mx-auto"> <div className="max-w-5xl flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x divide-white mx-auto">
<h1 className="grow h-full my-auto pr-auto text-4xl p-4 text-yellow-200">Our Purpose</h1> <h1 className="grow h-full my-auto pr-auto text-4xl p-4 font-bold text-center text-yellow-200">Our Purpose</h1>
<section className="px-4 text-neutral-300"> <section className="px-4 text-neutral-300">
<p className="pt-2">The goal of this site is to provide resources for cochlear implant users to practice listening with their device. While cochlear implants are highly effective in providing access to speech sounds for patients, it can take time and practice for them to adjust to the new signal transmitted through the implant. Auditory training can assist cochlear implant users in practicing listening to environmental sounds, understanding speech sounds in both quiet and noisy environments, and (re)training to enjoy music. We have compiled and categorized all available auditory training resources for cochlear implant users, including smartphone, web-based, and other online resources that can be utilized as clinician-guided or home-based by the cochlear implant patient and their families. Our online index allows both professionals and patients to filter through the resources based on specific characteristics and requested features, making the selection process more efficient.</p> <p className="pt-2">The goal of this site is to provide resources for cochlear implant users to practice listening with their device. While cochlear implants are highly effective in providing access to speech sounds for patients, it can take time and practice for them to adjust to the new signal transmitted through the implant. Auditory training can assist cochlear implant users in practicing listening to environmental sounds, understanding speech sounds in both quiet and noisy environments, and (re)training to enjoy music. We have compiled and categorized all available auditory training resources for cochlear implant users, including smartphone, web-based, and other online resources that can be utilized as clinician-guided or home-based by the cochlear implant patient and their families. Our online index allows both professionals and patients to filter through the resources based on specific characteristics and requested features, making the selection process more efficient.</p>
</section> </section>
</div> </div>
</div> </div>
<div className="p-4 sm:p-12 bg-yellow-100 text-white"> <div className="p-4 sm:p-12 bg-yellow-100 text-white drop-shadow-md border border-b border-neutral-400">
<div className="max-w-5xl flex flex-col-reverse md:flex-row md:divide-y-0 md:divide-x divide-neutral-700 mx-auto"> <div className="max-w-5xl flex flex-col-reverse md:flex-row md:divide-y-0 md:divide-x divide-neutral-700 mx-auto">
<section className="px-4 text-neutral-800"> <section className="px-4 text-neutral-800">
<p className="pt-2">You can use the <TextLink href="/resources">resources</TextLink> tab to scroll through the list of all resources, or the <TextLink href="/resources/survey">search</TextLink> tab to filter resources based on your preferences and skill level. We also have an <TextLink href="/about">About</TextLink> tab to learn more about the creators of this website and a <TextLink href="/contact">Contact Us</TextLink> tab to submit any comments or questions you have about the site and auditory training in general. We hope you find this website helpful in your auditory training journey, and we are here to support you every step of the way.</p> <p className="pt-2">You can use the <TextLink href="/resources">Resources</TextLink> tab to scroll through the list of all resources, or the <TextLink href="/resources/survey">Search</TextLink> tab to filter resources based on your preferences and skill level. We also have an <TextLink href="/about">About</TextLink> tab to learn more about the creators of this website and a <TextLink href="/contact">Contact Us</TextLink> tab to submit any comments or questions you have about the site and auditory training in general. We hope you find this website helpful in your auditory training journey, and we are here to support you every step of the way.</p>
</section> </section>
<h1 className="grow h-full my-auto pr-auto text-4xl p-4 text-black">Getting Started</h1> <h1 className="grow h-full my-auto pr-auto text-4xl font-bold p-4 text-center text-black">Getting Started</h1>
</div> </div>
</div> </div>
<div className="max-w-5xl mx-auto pt-12"> <div className="max-w-5xl mx-auto p-12">
<h1 className="font-extrabold text-4xl text-center">Want to learn more?</h1> <h1 className="font-extrabold text-4xl text-center">Want to learn more?</h1>
<div className="flex flex-col pt-8 space-y-6"> <div className="flex flex-col pt-8 space-y-6">
<section className="text-center mx-auto space-x-4"> <section className="text-center mx-auto space-x-4">