(SP: 1) [Frontend] Fix styles shop home page, buttons (#191)

Author: liudmylasovetovs

frontend/app/[locale]/shop/page.tsx

@@ -97,7 +97,7 @@ export default async function HomePage({
           <div className="mt-8">
             <Link
               href="/shop/products"
-              className="inline-flex items-center gap-2 rounded-md bg-accent px-6 py-3 text-sm font-semibold uppercase tracking-wide text-accent-foreground transition-colors hover:bg-accent/90"
+              className="inline-flex items-center gap-2 rounded-md bg-[color:var(--shop-cta-bg)] px-6 py-3 text-sm font-semibold uppercase tracking-wide text-[color:var(--shop-cta-fg)] transition-opacity hover:opacity-90"
               aria-label="Browse all products"
             >
               Browse all products

frontend/app/globals.css

@@ -203,8 +203,13 @@
   --color-ring: var(--foreground);
 
   --card: var(--background);
+    /* CTA button: light theme (section is black) -> pink bg + white text */
+  --shop-cta-bg: #ff2d55;
+  --shop-cta-fg: oklch(0.985 0 0);
+
 }
 
+
 .dark .shop-scope {
   /* dark: shop accent = magenta */
   --accent: var(--accent-primary);
@@ -221,6 +226,10 @@
   /* keep borders closer to previous shop look, derived (no hex) */
   --border: color-mix(in oklab, var(--foreground) 18%, var(--background));
   --input: color-mix(in oklab, var(--foreground) 18%, var(--background));
+    /* CTA button: dark theme (section becomes white) -> black bg + white text */
+  --shop-cta-bg: var(--background);
+  --shop-cta-fg: var(--foreground);
+
 }
 
 /* about-community */

frontend/components/shop/shop-hero.tsx

@@ -28,7 +28,7 @@ export function Hero({ headline, subheadline, ctaText, ctaLink }: HeroProps) {
           <div className="mt-10">
             <Link
               href={ctaLink}
-              className="inline-flex items-center gap-2 rounded-md bg-foreground px-6 py-3 text-sm font-semibold uppercase tracking-wide text-background transition-colors hover:bg-foreground/90"
+              className="inline-flex items-center gap-2 rounded-md bg-foreground px-6 py-3 text-sm font-semibold uppercase tracking-wide text-background transition-colors hover:bg-foreground/90 dark:bg-[color:var(--accent-primary)] dark:hover:bg-[color:var(--accent-hover)] dark:text-[color:var(--foreground)]"
             >
               <span>{ctaText}</span>
               <span aria-hidden="true">→</span>