diff --git a/app/page.tsx b/app/page.tsx index c547c3a9a0d369047382312a06547ab7167c34fd..f5c7e8d3ca12af263fff28a8e804c48ae807c667 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -24,6 +24,32 @@ const Home = () => { <main> <Hero title="Gluten Gobblers" className="bg-accentColor2 relative"> <div className="absolute inset-x-0 w-full"> + <Button className="absolute top-20 left-0 right-0 bg-secondaryColor hover:bg-blue-500 rounded-lg w-[400px] h-auto mx-auto z-10" + asChild + > + <a href="https://2024.igem.wiki/austin-utexas/awards"> + <div className="flex flex-col items-center justify-center"> + <motion.img + loading="lazy" + src="https://static.igem.wiki/teams/5119/awards/icon-awards-measurement.svg" + alt="Best Measurement" + className="w-24 h-auto pt-3" + initial="offscreen" + whileInView="onscreen" + viewport={{ once: true, amount: 0.8 }} + variants={textVariants} + /> + <motion.p + initial="offscreen" + whileInView="onscreen" + viewport={{ once: true, amount: 0.8 }} + variants={textVariants} + className="text-xl font-bold text-white py-3"> + Best Measurement Award + </motion.p> + </div> + </a> + </Button> <img className="w-full h-auto mx-auto object-contain" src="https://static.igem.wiki/teams/5119/home/bread-chomp-gif.gif" @@ -31,40 +57,6 @@ const Home = () => { /> </div> </Hero> - {/* MEASUREMENT AWARD */} - <SectionContainer className="bg-primaryColor"> - <section className="col-span-12 pb-8 md:pb-14 px-10 lg:px-24"> - <div className=" bg-secondaryColor rounded-2xl items-center text-center mx-auto w-[400px]"> - <div className="p-12"> - <motion.p className="text-2xl font-bold text-white"> - Best Measurement Award - </motion.p> - <motion.img - loading="lazy" - src="https://static.igem.wiki/teams/5119/awards/icon-awards-measurement.svg" - alt="Best Measurement" - className="w-32 h-auto mx-auto my-8" - initial="offscreen" - whileInView="onscreen" - viewport={{once: true, amount: 0.8}} - variants={textVariants} - - > - </motion.img> - <Button - className="w-2/3 my-4 bg-accentColor hover:bg-accentColor text-white py-9 rounded-lg" - > - <a - href="https://2024.igem.wiki/austin-utexas/awards" - className="text-xl font-bold" - > - Click Here - </a> - </Button> - </div> - </div> - </section> - </SectionContainer> {/* THE PROBLEM */} <SectionContainer className="bg-primaryColor"> <AnimatingText