feat: update button components to use onClick for external links and improve styling

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"
+                  onClick={() => window.open(c.buttonLink, '_blank')}
                 >
                   {c.buttonText}
                 </Button>
-                </a>
               </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>

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">
+
+          <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>
-          </a>
 
           {/* Mobile Menu Button */}
           <Button

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"
+                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>
-              </a>
-              <a href={buttons.secondaryUrl} target="_blank">
               <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>
-              </a>
             </div>
 
             <div className="flex items-center gap-8">

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"
+                  onClick={() => window.open(r.buttonLink, '_blank')}
                 >
                   {r.buttonText}
                   <Icon icon="tabler:arrow-right" className="h-6 w-6" />
                 </Button>
-                </a>
               </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">
+                <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>
-                </a>
-                <a href={featured.secondaryButtonLink} target="_blank">
-                  <Button variant="outline">
+                <Button
+                  variant="outline"
+                  onClick={() =>
+                    window.open(featured.secondaryButtonLink, '_blank')
+                  }
+                >
                   {featured.secondaryButtonText}
                 </Button>
-                </a>
               </div>
             </div>
             <div className="relative h-64 md:h-auto">