refine CTA button for learner and enterprise section

Signed-off-by: Wyllie Fang <wylliefang@gmail.com>

Author: Vincamine

src/components/Academy/Enterprise-Section/EnterpriseSection.js

@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import Button from "../../../reusecore/Button";
 
 const EnterpriseSectionWrapper = styled.section`
   
@@ -272,7 +273,12 @@ const EnterpriseSection = () => {
             <li>Advanced <a href="https://docs.layer5.io/cloud/academy/creating-content/instructor-console-guide/" target="_blank" rel="noopener noreferrer">instructor dashboard</a> with real-time progress tracking, skill assessment, and detailed analytics</li>
             <li>Flexible <a href="#" target="_blank" rel="noopener noreferrer">invitation</a> system: Host public challenges, onboard new partners, and accelerate engineer hiring with structured assessments</li>
           </ul>
-          <a href="#" className="btn btn-primary">Schedule Enterprise Demo</a>
+          <Button
+            $primary
+            title="Schedule Enterprise Demo"
+            $external={true}
+            $url="https://calendar.google.com/calendar/appointments/schedules/AcZssZ3pmcApaDP4xd8hvG5fy8ylxuFxD3akIRc5vpWJ60q-HemQi80SFFAVftbiIsq9pgiA2o8yvU56?gv=true"
+          />
         </div>
       </div>
     </EnterpriseSectionWrapper>

src/components/Academy/Learners-Section/LearnerSection.js

@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import Button from "../../../reusecore/Button";
 
 const LearnerSectionWrapper = styled.section`  
   &.audience-section.learners-section {
@@ -170,7 +171,12 @@ const LearnerSection = () => {
             <li> <a href="https://docs.layer5.io/cloud/academy/platform-development/" target="_blank" rel="noopener noreferrer">Open source</a> contribution opportunities</li>
             <li>Industry expert guidance and best practices</li>
           </ul>
-          <a href="https://docs.layer5.io/cloud/academy/using-the-academy/" target="_blank" rel="noopener noreferrer" className="btn btn-primary">Begin with Easy Academy Learner Guide</a>
+          <Button
+            $primary
+            title="Begin with Easy Academy Learner Guide"
+            $external={true}
+            $url="https://docs.layer5.io/cloud/academy/using-the-academy/"
+          />
         </div>
         <div className="stats-container">
           <h3 style={{ marginBottom: "1rem", color: "var(--primary-color)", textAlign: "center" }}>Learning Community</h3>