update home page

components/shared/AieroButton.tsx

@@ -1,8 +1,13 @@
 import { ArrowIcon } from "@/components/shared/icons/ArrowIcon";
 
-type ButtonVariant = "solid" | "outline" | "gradient-border" | "gradient-fill" | "simple";
+type ButtonVariant =
+  | "solid"
+  | "outline"
+  | "gradient-border"
+  | "gradient-fill"
+  | "simple";
 
-interface AieroButtonProps {
+interface tenextButtonProps {
   href?: string;
   variant?: ButtonVariant;
   children: React.ReactNode;
@@ -12,7 +17,7 @@ interface AieroButtonProps {
   onClick?: () => void;
 }
 
-export function AieroButton({
+export function tenextButton({
   href = "#",
   variant = "solid",
   children,
@@ -20,14 +25,14 @@ export function AieroButton({
   showArrow = true,
   target,
   onClick,
-}: AieroButtonProps) {
-  const baseClasses = "aiero-button";
+}: tenextButtonProps) {
+  const baseClasses = "tenext-button";
 
   const variantClasses: Record<ButtonVariant, string> = {
-    solid: "aiero-button-solid",
-    outline: "aiero-button-solid",
-    "gradient-border": "aiero-button-gradient-border",
-    "gradient-fill": "aiero-button-gradient-fill",
+    solid: "tenext-button-solid",
+    outline: "tenext-button-solid",
+    "gradient-border": "tenext-button-gradient-border",
+    "gradient-fill": "tenext-button-gradient-fill",
     simple: "",
   };
 

components/shared/CardShared.module.css

@@ -2,7 +2,7 @@
   position: absolute;
   bottom: 0;
   right: 0;
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   border-top-left-radius: 30px;
   border-bottom-right-radius: 25px;
   padding: 10px 10px 0 10px;
@@ -46,6 +46,6 @@
 }
 
 .iconSlideAslant:hover .iconSlideAslantInner,
-:global(.aiero-card:hover) .iconSlideAslantInner {
+:global(.tenext-card:hover) .iconSlideAslantInner {
   transform: translate3d(12px, -12px, 0);
 }

components/shared/CardShared.tsx

@@ -19,9 +19,7 @@ export function CardHeading({
   return (
     <div className={`mb-5 ${wrapperClassName}`}>
       {subtitle && (
-        <div
-          className={`aiero-subheading font-sora ${subtitleClassName}`}
-        >
+        <div className={`tenext-subheading font-sora ${subtitleClassName}`}>
           {subtitle}
         </div>
       )}
@@ -39,7 +37,7 @@ export function IconButton({ className = "" }: { className?: string }) {
     <div className={`${styles.iconWrapper} ${className}`}>
       <a
         href="#"
-        className={`${styles.iconSlideAslant} flex h-[52px] w-[52px] items-center justify-center rounded-[15px] bg-aiero-card-dark text-white transition-all duration-300 hover:bg-aiero-teal hover:text-aiero-dark`}
+        className={`${styles.iconSlideAslant} flex h-[52px] w-[52px] items-center justify-center rounded-[15px] bg-tenext-card-dark text-white transition-all duration-300 hover:bg-tenext-teal hover:text-tenext-dark`}
         aria-label="Open details"
       >
         <span className={styles.iconSlideAslantInner} aria-hidden="true">

components/shared/ContactFormSection.tsx

@@ -30,14 +30,14 @@ export function ContactFormSection() {
   }
 
   function handleChange(
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) {
     setFormState((prev) => ({ ...prev, [e.target.name]: e.target.value }));
   }
 
   return (
-    <SectionContainer paddingY="lg" className="bg-aiero-dark px-5">
-      <div className="overflow-hidden rounded-[25px] bg-aiero-card-dark">
+    <SectionContainer paddingY="lg" className="bg-tenext-dark px-5">
+      <div className="overflow-hidden rounded-[25px] bg-tenext-card-dark">
         <PageContainer className="grid grid-cols-1 gap-12 py-16 md:py-20 lg:grid-cols-2 lg:gap-16 lg:py-24">
           {/* ── Left: Info column ── */}
           <div className="flex flex-col">
@@ -58,13 +58,13 @@ export function ContactFormSection() {
                 <div className="flex flex-col gap-1">
                   <a
                     href={`tel:${siteConfig.phoneRaw}`}
-                    className="text-[15px] text-aiero-text-muted transition-colors hover:text-aiero-teal"
+                    className="text-[15px] text-tenext-text-muted transition-colors hover:text-tenext-teal"
                   >
                     {siteConfig.phone}
                   </a>
                   <a
                     href="tel:+11800234567"
-                    className="text-[15px] text-aiero-text-muted transition-colors hover:text-aiero-teal"
+                    className="text-[15px] text-tenext-text-muted transition-colors hover:text-tenext-teal"
                   >
                     + (123) 1800-234-5678
                   </a>
@@ -76,7 +76,7 @@ export function ContactFormSection() {
                 <h6 className="mb-3 font-sora text-sm font-semibold text-white">
                   Our Location
                 </h6>
-                <p className="text-[15px] leading-relaxed text-aiero-text-muted">
+                <p className="text-[15px] leading-relaxed text-tenext-text-muted">
                   {siteConfig.address.line1}
                   <br />
                   {siteConfig.address.line2}
@@ -90,7 +90,7 @@ export function ContactFormSection() {
                 </h6>
                 <a
                   href={`mailto:${siteConfig.email}`}
-                  className="text-[15px] text-aiero-text-muted underline transition-colors hover:text-aiero-teal"
+                  className="text-[15px] text-tenext-text-muted underline transition-colors hover:text-tenext-teal"
                 >
                   {siteConfig.email}
                 </a>
@@ -109,7 +109,7 @@ export function ContactFormSection() {
           {/* ── Right: Form column ── */}
           <div className="rounded-[25px] bg-white p-8 md:p-10">
             <h4
-              className="mb-8 text-aiero-dark"
+              className="mb-8 text-tenext-dark"
               style={{
                 fontFamily: "var(--font-sora)",
                 fontSize: "28px",
@@ -127,7 +127,7 @@ export function ContactFormSection() {
                 placeholder="Full name"
                 value={formState.fullName}
                 onChange={handleChange}
-                className="rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-aiero-dark outline-none transition-colors focus:border-aiero-teal"
+                className="rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-tenext-dark outline-none transition-colors focus:border-tenext-teal"
               />
               <input
                 type="email"
@@ -136,7 +136,7 @@ export function ContactFormSection() {
                 required
                 value={formState.email}
                 onChange={handleChange}
-                className="rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-aiero-dark outline-none transition-colors focus:border-aiero-teal"
+                className="rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-tenext-dark outline-none transition-colors focus:border-tenext-teal"
               />
               <input
                 type="text"
@@ -144,7 +144,7 @@ export function ContactFormSection() {
                 placeholder="Subject"
                 value={formState.subject}
                 onChange={handleChange}
-                className="rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-aiero-dark outline-none transition-colors focus:border-aiero-teal"
+                className="rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-tenext-dark outline-none transition-colors focus:border-tenext-teal"
               />
               <textarea
                 name="message"
@@ -152,11 +152,11 @@ export function ContactFormSection() {
                 rows={4}
                 value={formState.message}
                 onChange={handleChange}
-                className="resize-none rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-aiero-dark outline-none transition-colors focus:border-aiero-teal"
+                className="resize-none rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-tenext-dark outline-none transition-colors focus:border-tenext-teal"
               />
               <button
                 type="submit"
-                className="aiero-button aiero-button-gradient-border mt-2 self-start rounded-full px-8 py-4 font-sora text-base font-semibold text-aiero-dark"
+                className="tenext-button tenext-button-gradient-border mt-2 self-start rounded-full px-8 py-4 font-sora text-base font-semibold text-tenext-dark"
               >
                 Send message
                 <ArrowIcon className="h-3 w-3" />

components/shared/Footer.tsx

@@ -17,7 +17,7 @@ import { PageContainer } from "@/components/shared/PageContainer";
  */
 export function Footer() {
   return (
-    <footer className="bg-aiero-dark px-5 pb-10 pt-16 md:pt-20">
+    <footer className="bg-tenext-dark px-5 pb-10 pt-16 md:pt-20">
       <PageContainer>
         {/* ── Top row: Logo + link columns ── */}
         <div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-[1.5fr_1fr_1fr]">
@@ -25,7 +25,7 @@ export function Footer() {
           <div className="flex flex-col items-start gap-8">
             <Link href="/" aria-label="Home">
               <Image
-                src="/images/aiero/logo-dark.png"
+                src="/images/tenext/logo-dark.png"
                 alt={siteConfig.name}
                 width={146}
                 height={26}
@@ -57,7 +57,7 @@ export function Footer() {
                 <li key={link.label}>
                   <a
                     href={link.href}
-                    className="text-[15px] text-aiero-text-muted transition-colors duration-300 hover:text-aiero-teal"
+                    className="text-[15px] text-tenext-text-muted transition-colors duration-300 hover:text-tenext-teal"
                   >
                     {link.label}
                   </a>
@@ -76,7 +76,7 @@ export function Footer() {
                 <li key={link.label}>
                   <a
                     href={link.href}
-                    className="text-[15px] text-aiero-text-muted transition-colors duration-300 hover:text-aiero-teal"
+                    className="text-[15px] text-tenext-text-muted transition-colors duration-300 hover:text-tenext-teal"
                   >
                     {link.label}
                   </a>
@@ -87,8 +87,8 @@ export function Footer() {
         </div>
 
         {/* ── Bottom bar ── */}
-        <div className="mt-14 flex flex-col items-center justify-between gap-4 border-t border-aiero-card-border pt-8 md:flex-row">
-          <p className="text-sm text-aiero-text-muted">
+        <div className="mt-14 flex flex-col items-center justify-between gap-4 border-t border-tenext-card-border pt-8 md:flex-row">
+          <p className="text-sm text-tenext-text-muted">
             {siteConfig.copyright}
           </p>
           <div className="flex gap-6">
@@ -96,7 +96,7 @@ export function Footer() {
               <a
                 key={link.label}
                 href={link.href}
-                className="text-sm text-aiero-text-muted transition-colors duration-300 hover:text-aiero-teal"
+                className="text-sm text-tenext-text-muted transition-colors duration-300 hover:text-tenext-teal"
               >
                 {link.label}
               </a>

components/shared/IconBox.tsx

@@ -8,31 +8,35 @@ interface IconBoxProps {
   theme?: "dark" | "light";
 }
 
-export function IconBox({ icon, title, description, hasBorder = true, theme = "dark" }: IconBoxProps) {
+export function IconBox({
+  icon,
+  title,
+  description,
+  hasBorder = true,
+  theme = "dark",
+}: IconBoxProps) {
   const isLight = theme === "light";
-  
+
   return (
-    <div className="aiero-icon-box-widget w-full">
+    <div className="tenext-icon-box-widget w-full">
       <div className="icon-box-item flex flex-col items-start gap-[20px] sm:flex-row sm:gap-[40px]">
         {icon && (
           <div className="icon-container background-type-none flex h-[88px] w-[88px] shrink-0 items-center justify-center">
-            <span className="icon block h-full w-full">
-              {icon}
-            </span>
+            <span className="icon block h-full w-full">{icon}</span>
           </div>
         )}
-        
+
         <div
           className={`content-container flex-1 pb-[30px] pt-[5px] ${
-            hasBorder 
-              ? isLight 
-                ? "border-b border-gray-200" 
-                : "border-b border-aiero-card-border" 
+            hasBorder
+              ? isLight
+                ? "border-b border-gray-200"
+                : "border-b border-tenext-card-border"
               : ""
           }`}
         >
           <h5
-            className={`icon-box-title mb-[15px] ${isLight ? "text-aiero-dark" : "text-white"}`}
+            className={`icon-box-title mb-[15px] ${isLight ? "text-tenext-dark" : "text-white"}`}
             style={{
               fontFamily: "var(--font-manrope)",
               fontSize: "25px",
@@ -43,7 +47,7 @@ export function IconBox({ icon, title, description, hasBorder = true, theme = "d
             {title}
           </h5>
           <div className="icon-box-info">
-            <p className="text-[16px] leading-[1.6] text-aiero-text-muted">
+            <p className="text-[16px] leading-[1.6] text-tenext-text-muted">
               {description}
             </p>
           </div>

components/shared/PageTitleBanner.tsx

@@ -19,31 +19,31 @@ interface PageTitleBannerProps {
  *   - Full-width rounded card with gradient background
  *   - Centered "/ Title /" text
  *   - Breadcrumbs bottom-left
- *   - Decorative "Aiero" outline text right side
+ *   - Decorative "tenext" outline text right side
  *   - Top-left and bottom-right rounded corner decorations
  */
 export function PageTitleBanner({ title, breadcrumbs }: PageTitleBannerProps) {
   return (
-    <div className="relative mx-5 overflow-hidden rounded-[25px] bg-aiero-dark">
+    <div className="relative mx-5 overflow-hidden rounded-[25px] bg-tenext-dark">
       {/* Background image */}
       <div
         className="absolute inset-0 bg-cover bg-center opacity-80"
         style={{
-          backgroundImage: "url(/images/aiero/page-top-bg-min.png)",
+          backgroundImage: "url(/images/tenext/page-top-bg-min.png)",
         }}
       />
 
       {/* Gradient overlay */}
-      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-aiero-dark/60" />
+      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-tenext-dark/60" />
 
       {/* Top-left corner decoration */}
       <div className="absolute left-0 top-0 h-20 w-20">
         <div className="absolute left-0 top-0 h-full w-full rounded-br-[25px] bg-white" />
-        <div className="absolute left-0 top-0 h-full w-full rounded-tl-[25px] bg-aiero-dark">
+        <div className="absolute left-0 top-0 h-full w-full rounded-tl-[25px] bg-tenext-dark">
           <div
             className="absolute inset-0 bg-cover bg-center opacity-80"
             style={{
-              backgroundImage: "url(/images/aiero/page-top-bg-min.png)",
+              backgroundImage: "url(/images/tenext/page-top-bg-min.png)",
             }}
           />
         </div>
@@ -52,11 +52,11 @@ export function PageTitleBanner({ title, breadcrumbs }: PageTitleBannerProps) {
       {/* Bottom-right corner decoration */}
       <div className="absolute bottom-0 right-0 h-20 w-20">
         <div className="absolute bottom-0 right-0 h-full w-full rounded-tl-[25px] bg-white" />
-        <div className="absolute bottom-0 right-0 h-full w-full rounded-br-[25px] bg-aiero-dark">
+        <div className="absolute bottom-0 right-0 h-full w-full rounded-br-[25px] bg-tenext-dark">
           <div
             className="absolute inset-0 bg-cover bg-center opacity-80"
             style={{
-              backgroundImage: "url(/images/aiero/page-top-bg-min.png)",
+              backgroundImage: "url(/images/tenext/page-top-bg-min.png)",
             }}
           />
         </div>
@@ -74,23 +74,26 @@ export function PageTitleBanner({ title, breadcrumbs }: PageTitleBannerProps) {
             lineHeight: 1.1,
           }}
         >
-          <span className="mr-3 text-aiero-text-muted">/</span>
+          <span className="mr-3 text-tenext-text-muted">/</span>
           {title}
-          <span className="ml-3 text-aiero-text-muted">/</span>
+          <span className="ml-3 text-tenext-text-muted">/</span>
         </h1>
 
         {/* Breadcrumbs */}
-        <nav className="absolute bottom-8 left-8 md:bottom-10 md:left-12" aria-label="Breadcrumb">
+        <nav
+          className="absolute bottom-8 left-8 md:bottom-10 md:left-12"
+          aria-label="Breadcrumb"
+        >
           <ol className="flex items-center gap-2 text-sm text-white/70">
             {breadcrumbs.map((crumb, index) => (
               <li key={crumb.label} className="flex items-center gap-2">
                 {index > 0 && (
-                  <span className="mx-1 inline-block h-1 w-1 rounded-full bg-aiero-teal" />
+                  <span className="mx-1 inline-block h-1 w-1 rounded-full bg-tenext-teal" />
                 )}
                 {index < breadcrumbs.length - 1 && crumb.href ? (
                   <a
                     href={crumb.href}
-                    className="transition-colors hover:text-aiero-teal"
+                    className="transition-colors hover:text-tenext-teal"
                   >
                     {crumb.label}
                   </a>
@@ -102,7 +105,7 @@ export function PageTitleBanner({ title, breadcrumbs }: PageTitleBannerProps) {
           </ol>
         </nav>
 
-        {/* Decorative vertical "Aiero" text */}
+        {/* Decorative vertical "tenext" text */}
         <div
           className="absolute bottom-8 right-8 hidden select-none lg:block"
           style={{
@@ -117,7 +120,7 @@ export function PageTitleBanner({ title, breadcrumbs }: PageTitleBannerProps) {
               WebkitTextFillColor: "transparent",
             }}
           >
-            Aiero
+            tenext
           </span>
         </div>
       </div>

components/shared/PartnerLogosSection.tsx

@@ -5,16 +5,19 @@ import { SectionContainer } from "@/components/shared/SectionContainer";
 
 export function PartnerLogosSection() {
   const logos = [
-    "/images/aiero/partners-1.png",
-    "/images/aiero/partners-2.png",
-    "/images/aiero/partners-1.png",
-    "/images/aiero/partners-2.png",
-    "/images/aiero/partners-1.png",
-    "/images/aiero/partners-2.png",
+    "/images/tenext/partners-1.png",
+    "/images/tenext/partners-2.png",
+    "/images/tenext/partners-1.png",
+    "/images/tenext/partners-2.png",
+    "/images/tenext/partners-1.png",
+    "/images/tenext/partners-2.png",
   ];
 
   return (
-    <SectionContainer paddingY="lg" className="border-t border-aiero-card-border bg-aiero-dark">
+    <SectionContainer
+      paddingY="lg"
+      className="border-t border-tenext-card-border bg-tenext-dark"
+    >
       <PageContainer className="flex flex-col items-center">
         <h3
           className="mb-16 max-w-[800px] text-center text-white"
@@ -25,18 +28,22 @@ export function PartnerLogosSection() {
             lineHeight: 1.2,
           }}
         >
-          Tinker with a Neural Network right here in your browser. Don’t worry, you can’t break it. We Promise.
+          Our trusted collaborators in progress and success
         </h3>
 
         <div className="flex flex-wrap justify-center gap-8 md:gap-16 lg:gap-24 opacity-60">
           {logos.map((src, index) => (
-            <div key={index} className="flex h-12 items-center justify-center grayscale transition-all hover:grayscale-0">
+            <div
+              key={index}
+              className="flex h-12 items-center justify-center grayscale transition-all hover:grayscale-0"
+            >
               <img
                 src={src}
                 alt={`Partner ${index + 1}`}
                 className="h-full w-auto object-contain"
                 onError={(e) => {
-                  (e.target as HTMLImageElement).src = "/images/aiero/logo-dark.png";
+                  (e.target as HTMLImageElement).src =
+                    "/images/tenext/logo-dark.png";
                 }}
               />
             </div>

components/shared/PreFooterCTA.tsx

@@ -1,45 +1,42 @@
-import { AieroButton } from "@/components/shared/AieroButton";
+import { tenextButton as TenextButton } from "@/components/shared/AieroButton";
 import { PageContainer } from "@/components/shared/PageContainer";
 
 /**
- * PreFooterCTA — "It's blow your mind! Meet Neural Networks" banner.
+ * PreFooterCTA — "Elevate your business with our innovative solutions" banner.
  *
  * Shared across: Home, About, Services, Contacts.
  *
  * Structure (from reference):
- *   - Dark grey rounded card
- *   - Large teal gradient heading
- *   - "Get a Quote" button with arrow
+ *   - Plain white section
+ *   - Large dark heading, left aligned
+ *   - "Get in touch" text link, right aligned
  */
 export function PreFooterCTA() {
   return (
-    <section className="px-5 pb-5">
-      <div className="overflow-hidden rounded-[25px] bg-aiero-card-dark">
-        <PageContainer className="flex flex-col items-center gap-8 py-16 text-center md:flex-row md:justify-between md:py-20 md:text-left lg:py-24">
-          {/* Heading */}
-          <h2
-            className="max-w-[700px]"
-            style={{
-              fontFamily: "var(--font-sora)",
-              fontSize: "clamp(28px, 3.5vw, 48px)",
-              fontWeight: 700,
-              lineHeight: 1.15,
-            }}
-          >
-            <span className="text-white">{"It's blow your mind! "}</span>
-            <span className="gradient-text-purple">Meet Neural Networks</span>
-          </h2>
+    <section className="bg-white px-5 py-[60px] md:py-[80px]">
+      <PageContainer className="flex flex-col items-center gap-8 text-center md:flex-row md:justify-between md:text-left">
+        {/* Heading */}
+        <h2
+          className="max-w-[700px] text-tenext-dark"
+          style={{
+            fontFamily: "var(--font-sora)",
+            fontSize: "clamp(28px, 3.5vw, 48px)",
+            fontWeight: 700,
+            lineHeight: 1.15,
+          }}
+        >
+          Elevate your business with our innovative solutions
+        </h2>
 
-          {/* CTA */}
-          <AieroButton
-            href="/contacts"
-            variant="gradient-border"
-            className="shrink-0 rounded-full px-8 py-4 text-base font-semibold text-white"
-          >
-            Get a Quote
-          </AieroButton>
-        </PageContainer>
-      </div>
+        {/* CTA */}
+        <TenextButton
+          href="/contacts"
+          variant="simple"
+          className="shrink-0 text-[15px] font-semibold text-tenext-teal"
+        >
+          Get in touch
+        </TenextButton>
+      </PageContainer>
     </section>
   );
 }

components/shared/ScrollDown.tsx

@@ -1,4 +1,3 @@
-
 import { ArrowIcon } from "./icons/ArrowIcon";
 
 interface ScrollDownProps {
@@ -10,7 +9,7 @@ interface ScrollDownProps {
 
 /**
  * ScrollDown — interactive scroll indicator.
- * Matches original Aiero reference animation and styling.
+ * Matches original tenext reference animation and styling.
  */
 export function ScrollDown({
   href = "#scroll-down",
@@ -23,8 +22,8 @@ export function ScrollDown({
       <a
         href={href}
         className={`inline-flex h-[78px] w-[190px] items-center justify-center gap-2 rounded-b-[25px] ${
-          light ? "bg-white text-aiero-dark" : "bg-aiero-dark text-white"
-        } text-[14px] font-semibold no-underline transition-all hover:text-aiero-teal hover:shadow-scroll-btn`}
+          light ? "bg-white text-tenext-dark" : "bg-tenext-dark text-white"
+        } text-[14px] font-semibold no-underline transition-all hover:text-tenext-teal hover:shadow-scroll-btn`}
         style={{ fontFamily: "var(--font-sora)" }}
       >
         {text}

components/shared/SectionHeading.tsx

@@ -41,7 +41,7 @@ export function SectionHeading({
     <div className={className}>
       {tag && (
         <span
-          className={`aiero-subheading mb-4 text-aiero-teal ${tagClassName}`}
+          className={`tenext-subheading mb-4 text-tenext-teal ${tagClassName}`}
           style={{ fontFamily: "var(--font-sora)" }}
         >
           {tag}
@@ -62,7 +62,7 @@ export function SectionHeading({
 
       {description && (
         <p
-          className={`mt-6 text-base leading-relaxed text-aiero-text-muted ${descriptionClassName}`}
+          className={`mt-6 text-base leading-relaxed text-tenext-text-muted ${descriptionClassName}`}
         >
           {description}
         </p>

components/shared/SocialIcons.tsx

@@ -25,7 +25,7 @@ export function SocialIcons({
           rel="noopener noreferrer"
           role="listitem"
           aria-label={link.platform}
-          className={`flex h-10 w-10 items-center justify-center rounded-full border border-aiero-card-border text-aiero-text-muted transition-all duration-300 hover:border-aiero-teal hover:text-aiero-teal ${iconClassName}`}
+          className={`flex h-10 w-10 items-center justify-center rounded-full border border-tenext-card-border text-tenext-text-muted transition-all duration-300 hover:border-tenext-teal hover:text-tenext-teal ${iconClassName}`}
         >
           <SocialSvg icon={link.icon} />
         </a>