From f191ffc4b19e781b205dcf4ea95779ab3e414313 Mon Sep 17 00:00:00 2001
From: ArraysID <arraysdotid@gmail.com>
Date: Sat, 10 May 2025 15:48:35 +0700
Subject: [PATCH] feat: update button components to use onClick for external
 links and improve styling

---
 .../app/(frontend)/_components/community.tsx  | 15 +++----
 .../src/app/(frontend)/_components/header.tsx | 14 +++---
 .../src/app/(frontend)/_components/hero.tsx   | 35 +++++++--------
 .../_components/learning-resources.tsx        | 44 +++++++++++--------
 4 files changed, 57 insertions(+), 51 deletions(-)

diff --git a/apps/landing/src/app/(frontend)/_components/community.tsx b/apps/landing/src/app/(frontend)/_components/community.tsx
index e114e2a..a0d72c7 100644
--- a/apps/landing/src/app/(frontend)/_components/community.tsx
+++ b/apps/landing/src/app/(frontend)/_components/community.tsx
@@ -77,14 +77,13 @@ export function Community(props: CommunitiesSection) {
                 </div>
                 <h3 className="mb-2 text-xl font-bold">{c.title}</h3>
                 <p className="mb-6 text-muted-foreground">{c.description}</p>
-                <a href={c.buttonLink} target="_blank">
-                  <Button
-                    variant="outline"
-                    className="w-full group-hover:bg-primary group-hover:text-primary-foreground transition-colors duration-300"
-                  >
-                    {c.buttonText}
-                  </Button>
-                </a>
+                <Button
+                  variant="outline"
+                  className="w-full group-hover:bg-primary group-hover:text-primary-foreground transition-colors duration-300"
+                  onClick={() => window.open(c.buttonLink, '_blank')}
+                >
+                  {c.buttonText}
+                </Button>
               </div>
               <div className="absolute -bottom-1 -right-1 w-20 h-20 bg-gradient-to-tl from-primary/20 to-transparent rounded-tl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
             </motion.div>
diff --git a/apps/landing/src/app/(frontend)/_components/header.tsx b/apps/landing/src/app/(frontend)/_components/header.tsx
index 72f1286..d7acd7e 100644
--- a/apps/landing/src/app/(frontend)/_components/header.tsx
+++ b/apps/landing/src/app/(frontend)/_components/header.tsx
@@ -82,11 +82,15 @@ export function Header() {
 
         <div className="flex items-center gap-4">
           <SimpleThemeToggle />
-          <a href="https://discord.com/invite/imphnen" target="_blank">
-            <Button className="hidden md:flex bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300 font-bold text-black hover:text-white cursor-pointer">
-              Gabung Discord
-            </Button>
-          </a>
+
+          <Button
+            className="hidden md:flex bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300 font-bold text-black hover:text-white cursor-pointer"
+            onClick={() =>
+              window.open('https://discord.com/invite/imphnen', '_blank')
+            }
+          >
+            Gabung Discord
+          </Button>
 
           {/* Mobile Menu Button */}
           <Button
diff --git a/apps/landing/src/app/(frontend)/_components/hero.tsx b/apps/landing/src/app/(frontend)/_components/hero.tsx
index 5463b6d..fa543e5 100644
--- a/apps/landing/src/app/(frontend)/_components/hero.tsx
+++ b/apps/landing/src/app/(frontend)/_components/hero.tsx
@@ -81,25 +81,22 @@ export function Hero(props: HeroSection) {
             </div>
 
             <div className="flex flex-col sm:flex-row gap-4">
-              <a href={buttons.primaryUrl} target="_blank">
-                <Button
-                  size="lg"
-                  className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300 
-font-bold text-black hover:text-white cursor-pointer"
-                >
-                  {buttons.primaryLabel}
-                </Button>
-              </a>
-              <a href={buttons.secondaryUrl} target="_blank">
-                <Button
-                  size="lg"
-                  variant="outline"
-                  className="group relative overflow-hidden border-primary"
-                >
-                  <span className="absolute inset-0 bg-gradient-to-r from-primary/10 to-blue-400/10 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
-                  <span className="relative">{buttons.secondaryLabel}</span>
-                </Button>
-              </a>
+              <Button
+                size="lg"
+                className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300 font-bold text-black hover:text-white cursor-pointer"
+                onClick={() => window.open(buttons.primaryUrl, '_blank')}
+              >
+                {buttons.primaryLabel}
+              </Button>
+              <Button
+                size="lg"
+                variant="outline"
+                className="group relative overflow-hidden border-primary"
+                onClick={() => window.open(buttons.secondaryUrl, '_blank')}
+              >
+                <span className="absolute inset-0 bg-gradient-to-r from-primary/10 to-blue-400/10 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
+                <span className="relative">{buttons.secondaryLabel}</span>
+              </Button>
             </div>
 
             <div className="flex items-center gap-8">
diff --git a/apps/landing/src/app/(frontend)/_components/learning-resources.tsx b/apps/landing/src/app/(frontend)/_components/learning-resources.tsx
index 2e9eb9f..8f7b2b1 100644
--- a/apps/landing/src/app/(frontend)/_components/learning-resources.tsx
+++ b/apps/landing/src/app/(frontend)/_components/learning-resources.tsx
@@ -78,15 +78,15 @@ export function LearningResources(props: LearningResourcesSection) {
                 </div>
                 <h3 className="mb-2 text-xl font-bold">{r.title}</h3>
                 <p className="mb-6 text-muted-foreground">{r.description}</p>
-                <a href={r.buttonLink} target="_blank">
-                  <Button
-                    variant="link"
-                    className="p-0 h-auto font-medium text-primary hover:text-primary/80"
-                  >
-                    {r.buttonText}
-                    <Icon icon="tabler:arrow-right" className="h-6 w-6" />
-                  </Button>
-                </a>
+
+                <Button
+                  variant="link"
+                  className="p-0 h-auto font-medium text-primary hover:text-primary/80"
+                  onClick={() => window.open(r.buttonLink, '_blank')}
+                >
+                  {r.buttonText}
+                  <Icon icon="tabler:arrow-right" className="h-6 w-6" />
+                </Button>
               </div>
               <div className="absolute -bottom-32 -right-32 w-64 h-64 bg-gradient-to-tl from-primary/10 to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500 group-hover:-translate-y-10 group-hover:-translate-x-10" />
             </motion.div>
@@ -110,16 +110,22 @@ export function LearningResources(props: LearningResourcesSection) {
                 {featured.description}
               </p>
               <div className="flex flex-wrap gap-4">
-                <a href={featured.primaryButtonLink} target="_blank">
-                  <Button className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 font-bold text-black hover:text-white cursor-pointer">
-                    {featured.primaryButtonText}
-                  </Button>
-                </a>
-                <a href={featured.secondaryButtonLink} target="_blank">
-                  <Button variant="outline">
-                    {featured.secondaryButtonText}
-                  </Button>
-                </a>
+                <Button
+                  className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 font-bold text-black hover:text-white cursor-pointer"
+                  onClick={() =>
+                    window.open(featured.primaryButtonLink, '_blank')
+                  }
+                >
+                  {featured.primaryButtonText}
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() =>
+                    window.open(featured.secondaryButtonLink, '_blank')
+                  }
+                >
+                  {featured.secondaryButtonText}
+                </Button>
               </div>
             </div>
             <div className="relative h-64 md:h-auto">