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

apps/landing/src/app/(frontend)/_components/call-to-action.tsx

@@ -51,7 +51,7 @@ export function CallToAction(props: CallToActionSection) {
               <div className="flex flex-col sm:flex-row gap-4 justify-center">
                 <Button
                   size="lg"
-                  className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90"
+                  className="bg-gradient-to-r from-primary to-blue-400 text-white hover:from-primary/90 hover:to-blue-400/90"
                   onClick={() => window.open(primaryButtonLink, '_blank')}
                 >
                   {primaryButtonLabel}

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
-                  <Button
+                  variant="outline"
-                    variant="outline"
+                  className="w-full group-hover:bg-primary group-hover:text-primary-foreground transition-colors duration-300"
-                    className="w-full group-hover:bg-primary group-hover:text-primary-foreground transition-colors duration-300"
+                  onClick={() => window.open(c.buttonLink, '_blank')}
-                  >
+                >
-                    {c.buttonText}
+                  {c.buttonText}
-                  </Button>
+                </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,14 @@ export function Header() {
 
         <div className="flex items-center gap-4">
           <SimpleThemeToggle />
-          <a href="https://discord.com/invite/imphnen" target="_blank">
+          <Button
-            <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">
+            className="hidden md:flex bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 text-white transition-all duration-300"
-              Gabung Discord
+            onClick={() =>
-            </Button>
+              window.open('https://discord.com/invite/imphnen', '_blank')
-          </a>
+            }
+          >
+            Gabung Discord
+          </Button>
 
           {/* Mobile Menu Button */}
           <Button

apps/landing/src/app/(frontend)/_components/hero.tsx

@@ -81,24 +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
-                <Button
+                size="lg"
-                  size="lg"
+                className="bg-gradient-to-r from-primary to-blue-400 text-white hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300"
-                  className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300"
+                onClick={() => window.open(buttons.primaryUrl, '_blank')}
-                >
+              >
-                  {buttons.primaryLabel}
+                {buttons.primaryLabel}
-                </Button>
+              </Button>
-              </a>
+              <Button
-              <a href={buttons.secondaryUrl} target="_blank">
+                size="lg"
-                <Button
+                variant="outline"
-                  size="lg"
+                className="group relative overflow-hidden border-primary"
-                  variant="outline"
+                onClick={() => window.open(buttons.secondaryUrl, '_blank')}
-                  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="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>
-                  <span className="relative">{buttons.secondaryLabel}</span>
+              </Button>
-                </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
+                <Button
-                    variant="link"
+                  variant="link"
-                    className="p-0 h-auto font-medium text-primary hover:text-primary/80"
+                  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" />
+                  {r.buttonText}
-                  </Button>
+                  <Icon icon="tabler:arrow-right" className="h-6 w-6" />
-                </a>
+                </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
-                  <Button className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90">
+                  className="bg-gradient-to-r from-primary to-blue-400 text-white hover:from-primary/90 hover:to-blue-400/90"
-                    {featured.primaryButtonText}
+                  onClick={() =>
-                  </Button>
+                    window.open(featured.primaryButtonLink, '_blank')
-                </a>
+                  }
-                <a href={featured.secondaryButtonLink} target="_blank">
+                >
-                  <Button variant="outline">
+                  {featured.primaryButtonText}
-                    {featured.secondaryButtonText}
+                </Button>
-                  </Button>
+                <Button
-                </a>
+                  variant="outline"
+                  onClick={() =>
+                    window.open(featured.secondaryButtonLink, '_blank')
+                  }
+                >
+                  {featured.secondaryButtonText}
+                </Button>
               </div>
             </div>
             <div className="relative h-64 md:h-auto">