feat: update buttons, footer and header

src/components/SectionBasicContent/SectionBasicContent.vue

@@ -14,9 +14,14 @@
           v-for="(button, index) in buttons"
           :key="index"
         >
-          <LinkButton
+          <Button
             v-if="button.link"
-            v-bind="button"
+            :href="button.link"
+            :label="button.label"
+            type="primary"
+            theme="light"
+            :target="button.target"
+            :icon="button.icon"
           />
         </template>
       </template>
@@ -34,7 +39,7 @@
 
   <script setup>
     import ContentSection from 'azion-webkit/contentsection'
-    import LinkButton from 'azion-webkit/linkbutton'
+    import Button from 'azion-webkit/components/Button';
 
     defineProps({
       id: {

src/components/TabGroup/TabGroup.css

@@ -1,5 +1,6 @@
 .TabGroup {
 	display: flex;
+	border-bottom: none !important;
 }
 
 .TabGroup button,
@@ -10,7 +11,7 @@
 	border-radius: 0;
 	cursor: pointer;
 	padding: 0.6rem 1rem;
-	color: var(--theme-text-light);
+	color: var(--tabgroup-white);
 	border-bottom: 4px solid transparent;
 	background-color: transparent;
 	text-decoration: none;
@@ -23,29 +24,24 @@
 
 .TabGroup .active,
 .TabGroup [aria-selected='true'] {
-	color: var(--theme-text);
-	border-bottom-color: var(--theme-accent);
 	font-weight: bold;
 }
 
-@media (forced-colors: active) {
-	.TabGroup {
-		border-bottom-color: Canvas;
-	}
-
-	.TabGroup .active {
-		color: ButtonText;
-		border-bottom-color: ButtonText;
-	}
-
-	.TabGroup a,
-	.TabGroup button {
-		color: LinkText;
-		border-bottom-color: Canvas;
-	}
-}
 
 .TabGroup.no-flex button,
 .TabGroup.no-flex a {
 	flex: 0;
+}
+
+._tablist_ugdi6_34 {
+    border-color: transparent !important;
+  }
+
+.TabGroup > span{
+    color: var(--tabgroup-orange-500) !important;
+    height: 10px !important;  
+    background: var(--tabgroup-orange-500) !important;
+}
+._tab-scroll-overflow_ugdi6_10 > .border {
+    border-color: var(--tabgroup-neutral-800) !important;
 }

src/components/Table/TablePricing.astro

@@ -83,8 +83,41 @@ const i18n = {
 
 async function fetchPricingData() {	
 	// product_slug come from Astro.props
-  const response = await fetch(`https://www.azion.com/api/pricing/get/product_slug/${product_slug}`);
-  return await response.json();
+	const url = `https://www.azion.com/api/pricing/get/product_slug/${product_slug}`;
+
+	try {
+		const response = await fetch(url);
+
+		// If the API fails or returns a non-2xx status, avoid trying to parse JSON
+		if (!response.ok) {
+			console.error(`[TablePricing] Failed to fetch pricing data`, {
+				url,
+				status: response.status,
+				statusText: response.statusText
+			});
+			return [];
+		}
+
+		const contentType = response.headers.get('content-type') || '';
+
+		// The pricing API should always return JSON; if it doesn't, bail out gracefully
+		if (!contentType.includes('application/json')) {
+			console.error(`[TablePricing] Unexpected content-type when fetching pricing data`, {
+				url,
+				contentType
+			});
+			return [];
+		}
+
+		return await response.json();
+	} catch (error) {
+		// Handle network / runtime errors so the docs build doesn't break
+		console.error(`[TablePricing] Error fetching pricing data`, {
+			url,
+			error
+		});
+		return [];
+	}
 }
 
 function isReal() {

src/components/tabs/Tabs.tsx

@@ -4,6 +4,7 @@ import '../TabGroup/TabGroup.css';
 import { genTabId } from './store';
 import styles from './Tabs.module.css';
 import { useTabState } from './useTabState';
+import { primitiveColors } from 'azion-theme/src/tokens/colors-primitive';
 
 const tabSlotKey = 'tab.' as const;
 const panelSlotKey = 'panel.' as const;
@@ -73,8 +74,9 @@ export default function Tabs({ sharedStore, ...slots }: Props) {
 			const containerBoundingRect = tabButtonContainerRef.current.getBoundingClientRect();
 			if (!activeTabIndicatorRef.current.style.width)
 				activeTabIndicatorRef.current.style.width = '1px';
-			activeTabIndicatorRef.current.style.transform = `translateX(${tabBoundingRect.left - containerBoundingRect.left
-				}px) scaleX(${tabBoundingRect.width})`;
+			activeTabIndicatorRef.current.style.transform = `translateX(${
+				tabBoundingRect.left - containerBoundingRect.left
+			}px) scaleX(${tabBoundingRect.width})`;
 		}
 	}, [curr]);
 
@@ -97,8 +99,14 @@ export default function Tabs({ sharedStore, ...slots }: Props) {
 		}
 	}
 
+	const cssVariables = {
+		'--tabgroup-white': primitiveColors.base.white,
+		'--tabgroup-neutral-800': primitiveColors.neutral[800],
+		'--tabgroup-orange-500': primitiveColors.orange[500],
+	};
+
 	return (
-		<div className={styles.container}>
+		<div className={styles.container} style={cssVariables}>
 			<div className={styles['tab-scroll-overflow']}>
 				<div
 					ref={tabButtonContainerRef}
@@ -126,7 +134,6 @@ export default function Tabs({ sharedStore, ...slots }: Props) {
 						className={styles.selectedIndicator}
 						aria-hidden="true"
 					/>
-
 				</div>
 				<div className="border" />
 			</div>