From 8aa5309e3655c272e77d757223677a85063406c2 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Wed, 22 Oct 2025 13:21:14 +0200
Subject: [PATCH] refactor: remove unnecessary relative positioning from
 components

---
 src/components/About.tsx           |  2 +-
 src/components/CallToAction.tsx    |  2 +-
 src/components/Features.tsx        | 10 +++++-----
 src/components/PrimaryFeatures.tsx |  6 +++---
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/About.tsx b/src/components/About.tsx
index eb4750c..d359389 100644
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -13,7 +13,7 @@ export function About() {
       <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
         <CircleBackground color="#06b6d4" className="animate-spin-slower" />
       </div>
-      <Container className="relative">
+      <Container>
         <div className="mx-auto max-w-3xl text-center">
           <Eyebrow color="accent">Our Mission</Eyebrow>
           <SectionHeader color="white" className="mt-2">
diff --git a/src/components/CallToAction.tsx b/src/components/CallToAction.tsx
index cbd9fe5..d5ee8fd 100644
--- a/src/components/CallToAction.tsx
+++ b/src/components/CallToAction.tsx
@@ -15,7 +15,7 @@ export function CallToAction() {
       <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
         <CircleBackground color="#06b6d4" className="animate-spin-slower" />
       </div>
-      <Container className="relative">
+      <Container>
         <div className="mx-auto max-w-2xl text-center">
           <SectionHeader as="h2" color="white">
             Get Started Today
diff --git a/src/components/Features.tsx b/src/components/Features.tsx
index aabd56b..2451079 100644
--- a/src/components/Features.tsx
+++ b/src/components/Features.tsx
@@ -25,7 +25,7 @@ export function Features() {
         <div className="mt-10 grid grid-cols-1 gap-x-4 gap-y-8 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
           <div className="group relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
             <div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-t-4xl lg:rounded-tl-4xl" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
+            <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
               <Pathfinding />
               <div className="p-10 pt-4">
                 <CardEyebrow color="accent">Routing</CardEyebrow>
@@ -43,7 +43,7 @@ export function Features() {
           </div>
           <div className="group relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
             <div className="absolute inset-0 rounded-lg bg-white lg:rounded-tr-4xl" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
+            <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
               <MessageBus />
               <div className="p-10 pt-4">
                 <CardEyebrow color="accent">Communication</CardEyebrow>
@@ -61,7 +61,7 @@ export function Features() {
           </div>
           <div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
             <div className="absolute inset-0 rounded-lg bg-white lg:rounded-bl-4xl" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
+            <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
               <ProxyDetection className="h-80" />
               <div className="p-10 pt-4">
                 <CardEyebrow color="accent">Discovery</CardEyebrow>
@@ -79,7 +79,7 @@ export function Features() {
           </div>
           <div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
             <div className="absolute inset-0 rounded-lg bg-white" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
+            <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
               <ProxyForwarding className="h-80" />
               <div className="p-10 pt-4">
                 <CardEyebrow color="accent">Connectivity</CardEyebrow>
@@ -97,7 +97,7 @@ export function Features() {
           </div>
           <div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
             <div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-b-4xl lg:rounded-br-4xl" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
+            <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
               <ContentDistribution className="h-80" />
               <div className="p-10 pt-4">
                 <CardEyebrow color="accent">Delivery</CardEyebrow>
diff --git a/src/components/PrimaryFeatures.tsx b/src/components/PrimaryFeatures.tsx
index 2ff9fa2..1b76bcb 100644
--- a/src/components/PrimaryFeatures.tsx
+++ b/src/components/PrimaryFeatures.tsx
@@ -259,7 +259,7 @@ function FeaturesDesktop() {
       onChange={onChange}
       vertical
     >
-      <TabList className="relative z-10 order-last col-span-6 space-y-6">
+      <TabList className="z-10 order-last col-span-6 space-y-6">
         {features.map((feature, featureIndex) => (
           <div
             key={feature.name}
@@ -292,7 +292,7 @@ function FeaturesDesktop() {
           </div>
         ))}
       </TabList>
-      <div className="relative col-span-6">
+      <div className="col-span-6">
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
           <CircleBackground color="#13B5C8" className="animate-spin-slower" />
         </div>
@@ -370,7 +370,7 @@ function FeaturesMobile() {
           >
             <div
               className={clsx(
-                'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline-2 transition-colors',
+                'transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline-2 transition-colors',
                 activeIndex === featureIndex
                   ? 'outline-transparent' // Remove outline for active mobile slide
                   : 'outline-transparent hover:outline-cyan-500',