From e4c46ad2fc6fb7430a163bb0b185441d389ba72f Mon Sep 17 00:00:00 2001 From: KamyCoding Date: Wed, 5 Aug 2026 19:17:18 +0200 Subject: [PATCH 1/5] refactor(ui): extract reusable CTA link --- src/app/pages/home/sections/hero/hero.css | 20 ++----- src/app/pages/home/sections/hero/hero.html | 2 +- src/app/pages/home/sections/hero/hero.ts | 5 +- src/app/shared/ui/cta-link/cta-link.css | 66 ++++++++++++++++++++++ src/app/shared/ui/cta-link/cta-link.html | 8 +++ src/app/shared/ui/cta-link/cta-link.ts | 17 ++++++ src/styles.css | 26 --------- 7 files changed, 100 insertions(+), 44 deletions(-) create mode 100644 src/app/shared/ui/cta-link/cta-link.css create mode 100644 src/app/shared/ui/cta-link/cta-link.html create mode 100644 src/app/shared/ui/cta-link/cta-link.ts diff --git a/src/app/pages/home/sections/hero/hero.css b/src/app/pages/home/sections/hero/hero.css index e0c9232..99bf512 100644 --- a/src/app/pages/home/sections/hero/hero.css +++ b/src/app/pages/home/sections/hero/hero.css @@ -97,21 +97,9 @@ } .hero__cta { - display: inline-flex; order: 1; width: 156px; height: 44px; - align-items: flex-start; - justify-content: center; - padding-top: 9px; - border: 1px solid currentColor; - border-radius: 100px; - box-shadow: 2px 4px 0 currentColor; - color: inherit; - font-size: 18px; - font-weight: 500; - line-height: 1.2; - text-decoration: none; } .hero__polaroid { @@ -269,12 +257,14 @@ } .hero__cta { + --cta-height: 2.778cqw; + --cta-font-size: 1.25cqw; + --cta-shadow-x: 0.139cqw; + --cta-shadow-y: 0.278cqw; + width: 10.833cqw; height: 3.056cqw; margin-top: 10.556cqw; - padding-top: 0.625cqw; - box-shadow: 0.139cqw 0.278cqw 0 currentColor; - font-size: 1.25cqw; } .hero__socials { diff --git a/src/app/pages/home/sections/hero/hero.html b/src/app/pages/home/sections/hero/hero.html index 7557eb9..04fdff8 100644 --- a/src/app/pages/home/sections/hero/hero.html +++ b/src/app/pages/home/sections/hero/hero.html @@ -76,7 +76,7 @@

- Get in Touch +