diff --git a/src/app/globals.css b/src/app/globals.css index 70ed84f..b202b6a 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -36,31 +36,43 @@ body { } @layer components { + /* casual button */ .ext-btn { - @apply py-2 px-4 rounded-full hover:opacity-95 hover:scale-95 transition-transform font-semibold no-underline; + @apply py-2 px-4 rounded-full hover:opacity-95 hover:scale-105 transition-all font-medium no-underline duration-300; } .ext-btn-primary { - @apply bg-extColorPrimary text-white; + @apply ext-btn bg-extColorPrimary text-white hover:text-extColorPrimary3; } .ext-btn-primary2 { - @apply bg-extColorPrimary2 text-white; + @apply ext-btn bg-extColorPrimary2 text-white hover:text-extColorPrimary3; } .ext-btn-primary3 { - @apply bg-extColorPrimary3 text-white; + @apply ext-btn bg-extColorPrimary3 text-white hover:text-extColorPrimary3; } .ext-btn-primary4 { - @apply bg-extColorPrimary4 text-white; + @apply ext-btn bg-extColorPrimary4 text-white hover:text-extColorPrimary3; } - .ext-btn-shadow-sm { - @apply py-2 px-3 rounded-full text-sm font-medium no-underline shadow-[0px_0px_10px_0px_rgba(0,0,0,0.5)]; + /* CTA button */ + .ext-btn-cta { + @apply inline-block !text-[16px] font-medium bg-extColorPrimary6 hover:bg-extColorPrimary8 !text-white py-1 px-6 hover:scale-105 rounded-full text-lg shadow-sm transition-all duration-300; } - .ext-btn-shadow-sm-primary4 { - @apply bg-extColorPrimary4 text-white hover:text-white hover:bg-extColorPrimary6 transition-colors; + .ext-btn-cta * { + @apply !inline-block; + } + .ext-btn-cta-md { + @apply ext-btn-cta !text-lg py-4 px-8; } - .ext-btn-shadow-sm-primary8 { - @apply bg-extColorPrimary8 text-white hover:text-white hover:bg-extColorPrimary6 transition-colors; + /* button with shadow */ + .ext-btn-shadow { + @apply py-2 px-3 rounded-full text-sm font-medium no-underline shadow-[0px_0px_10px_0px_rgba(0,0,0,0.5)] transition-colors duration-300; + } + .ext-btn-shadow-primary4 { + @apply ext-btn-shadow bg-extColorPrimary4 text-white hover:text-white hover:bg-extColorPrimary6; + } + .ext-btn-shadow-primary8 { + @apply ext-btn-shadow bg-extColorPrimary8 text-white hover:text-white hover:bg-extColorPrimary6; } .shadow-nav { diff --git a/src/components/Blocks/BeforeFooter/index.tsx b/src/components/Blocks/BeforeFooter/index.tsx index 95a47af..088860c 100644 --- a/src/components/Blocks/BeforeFooter/index.tsx +++ b/src/components/Blocks/BeforeFooter/index.tsx @@ -1,4 +1,5 @@ import Link from "next/link"; +import { FaArrowRight } from "react-icons/fa"; export interface BeforeFooterBlockProps { id?: string; @@ -50,11 +51,8 @@ export function BeforeFooterBlock({ title, description, buttonText, showLinier =
Southern Arizona’s Only Complete Cancer Treatment Center in Sierra Vista.
- + Request Consultation