add footstep pattern

This commit is contained in:
Brandon Egger 2023-04-17 18:23:27 -05:00
parent b36a5aa18a
commit 0ae9903eee
2 changed files with 28 additions and 21 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 182 KiB

View File

@ -69,27 +69,34 @@ const About: NextPage = () => {
</div> </div>
</div> </div>
<div className="w-full"> <div className="w-full">
<div className="mx-auto max-w-7xl sm:p-8"> <div style={{
{/** Small screens */} backgroundImage: `url("/backdrops/foot-steps.png")`,
<div className="sm:hidden w-full bg-neutral-900 p-4 border-b-2 border-yellow-400"> }} className="mx-auto max-w-7xl">
<h1 className="text-white text-4xl font-bold text-center"> <div style={{
Meet the Team WebkitBackdropFilter: `blur(2px)`,
<HandRaisedIcon className="ml-4 rotate-12 text-yellow-200 inline w-12 animate-hand_wave animate-hand_pop"/> backdropFilter: `blur(2px)`,
</h1> }} className="sm:p-8">
</div> {/** Small screens */}
{/** Large screens */} <div className="sm:hidden w-full bg-neutral-900 p-4 border-b-2 border-yellow-400">
<div className="hidden sm:block mx-auto bg-neutral-900 p-4 mx-auto w-max rounded-xl mt-8 mb-20 border-2 border-neutral-300 shadow-xl"> <h1 className="text-white text-4xl font-bold text-center">
<h1 className="text-white text-4xl font-bold text-center"> Meet the Team
Meet the Team <HandRaisedIcon className="ml-4 rotate-12 text-yellow-200 inline w-12 animate-hand_wave animate-hand_pop"/>
<HandRaisedIcon className="ml-4 rotate-12 text-yellow-200 inline w-12 animate-hand_wave"/> </h1>
</h1> </div>
</div> {/** Large screens */}
<div className="sm:my-16 grid grid-cols-2 lg:grid-cols-3 sm:mt-4 lg:space-y-24 sm:space-y-12"> <div className="hidden sm:block mx-auto bg-neutral-900 p-4 mx-auto w-max rounded-xl mt-8 mb-20 border-2 border-neutral-300 shadow-xl">
{biographies.map((biography, index) => { <h1 className="text-white text-4xl font-bold text-center">
return ( Meet the Team
<Biopgraphy key={index} {...biography} /> <HandRaisedIcon className="ml-4 rotate-12 text-yellow-200 inline w-12 animate-hand_wave"/>
); </h1>
})} </div>
<div className="sm:my-16 grid grid-cols-2 lg:grid-cols-3 sm:mt-4 lg:space-y-24 sm:space-y-12">
{biographies.map((biography, index) => {
return (
<Biopgraphy key={index} {...biography} />
);
})}
</div>
</div> </div>
</div> </div>
</div> </div>