From 54a550dd9f015dec0147283f738778e6ada2195c Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Thu, 4 Jun 2026 18:46:39 +0900
Subject: [PATCH] style(web): simplify section component class names by
 removing redundant padding

---
 .../web/components/sections/builders-hub/_sections/atoms.tsx | 5 +----
 .../sections/builders-hub/_sections/documentation.tsx        | 2 +-
 apps/web/components/sections/builders-hub/_sections/hero.tsx | 2 +-
 .../components/sections/builders-hub/_sections/journey.tsx   | 2 +-
 .../sections/builders-hub/builders-hub-app-install.tsx       | 2 +-
 .../components/sections/shared/basecamp-install-section.tsx  | 5 +----
 .../sections/shared/developer-programs-section.tsx           | 5 +----
 7 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/apps/web/components/sections/builders-hub/_sections/atoms.tsx b/apps/web/components/sections/builders-hub/_sections/atoms.tsx
index b902bc4574..abd7109e43 100644
--- a/apps/web/components/sections/builders-hub/_sections/atoms.tsx
+++ b/apps/web/components/sections/builders-hub/_sections/atoms.tsx
@@ -17,10 +17,7 @@ export function SectionFrame({
   children: ReactNode
 }) {
   return (
-    <section
-      id={id}
-      className="border-t border-brand-dark-green/10 px-3 pt-6 pb-25"
-    >
+    <section id={id} className="border-t border-brand-dark-green/10 pt-6 pb-25">
       <ContentWidth>
         <h2 className="flex items-baseline gap-3 text-[24px] leading-[1.1] tracking-[-0.24px] whitespace-nowrap">
           <span className="font-display text-brand-dark-green/50">{index}</span>
diff --git a/apps/web/components/sections/builders-hub/_sections/documentation.tsx b/apps/web/components/sections/builders-hub/_sections/documentation.tsx
index a4588247d8..b01acddfb9 100644
--- a/apps/web/components/sections/builders-hub/_sections/documentation.tsx
+++ b/apps/web/components/sections/builders-hub/_sections/documentation.tsx
@@ -13,7 +13,7 @@ export function DocumentationSection({
   return (
     <section
       id="resources"
-      className="border-t border-brand-dark-green/10 bg-brand-off-white px-3 pt-[39px] pb-25 text-brand-dark-green"
+      className="border-t border-brand-dark-green/10 bg-brand-off-white pt-[39px] pb-25 text-brand-dark-green"
     >
       <ContentWidth>
         <div className="md:grid md:grid-cols-[1fr_1fr] md:gap-3">
diff --git a/apps/web/components/sections/builders-hub/_sections/hero.tsx b/apps/web/components/sections/builders-hub/_sections/hero.tsx
index 16b86f3f18..82094fdac5 100644
--- a/apps/web/components/sections/builders-hub/_sections/hero.tsx
+++ b/apps/web/components/sections/builders-hub/_sections/hero.tsx
@@ -13,7 +13,7 @@ export function BuildersHubHero({ hero }: { hero: BuilderHubSettings['hero'] })
   )
 
   return (
-    <section className="relative h-[483px] px-3 pt-6 md:h-[487px]">
+    <section className="relative h-[483px] pt-6 md:h-[487px]">
       <ContentWidth className="relative h-full">
         <div className="absolute top-6 left-3 h-[75px] w-[107px] overflow-hidden">
           <Image
diff --git a/apps/web/components/sections/builders-hub/_sections/journey.tsx b/apps/web/components/sections/builders-hub/_sections/journey.tsx
index c006b3f95a..e7172a2b59 100644
--- a/apps/web/components/sections/builders-hub/_sections/journey.tsx
+++ b/apps/web/components/sections/builders-hub/_sections/journey.tsx
@@ -10,7 +10,7 @@ export function JourneySection({
   data: NonNullable<BuilderHubSettings['journey']>
 }) {
   return (
-    <section className="px-3 pb-25 md:pb-25">
+    <section className="pb-25 md:pb-25">
       <ContentWidth>
         <h2 className="font-sans text-[24px] leading-[1.1] tracking-[-0.24px] text-brand-dark-green">
           {data.title}
diff --git a/apps/web/components/sections/builders-hub/builders-hub-app-install.tsx b/apps/web/components/sections/builders-hub/builders-hub-app-install.tsx
index 5a0154664f..7a0d434fd6 100644
--- a/apps/web/components/sections/builders-hub/builders-hub-app-install.tsx
+++ b/apps/web/components/sections/builders-hub/builders-hub-app-install.tsx
@@ -37,7 +37,7 @@ function TagIcon({ icon }: { icon?: BuilderHubTagIcon }) {
 export function BuildersHubAppInstall({ data }: Props) {
   return (
     <section id="app-install" className="py-10">
-      <ContentWidth>
+      <ContentWidth className="!px-0">
         <GiantSwitch
           accent={data.accent}
           imagePosition={data.imagePosition}
diff --git a/apps/web/components/sections/shared/basecamp-install-section.tsx b/apps/web/components/sections/shared/basecamp-install-section.tsx
index 2c9c682440..a147d0c8d4 100644
--- a/apps/web/components/sections/shared/basecamp-install-section.tsx
+++ b/apps/web/components/sections/shared/basecamp-install-section.tsx
@@ -85,10 +85,7 @@ export function BasecampInstallSection({
   cards,
 }: BasecampInstallSectionProps) {
   return (
-    <section
-      id={id}
-      className="border-t border-brand-dark-green/10 px-3 pt-6 pb-25"
-    >
+    <section id={id} className="border-t border-brand-dark-green/10 pt-6 pb-25">
       <ContentWidth>
         <h2 className="flex items-baseline gap-3 text-[24px] leading-[1.1] tracking-[-0.24px] whitespace-nowrap">
           <span className="font-display text-brand-dark-green/50">{index}</span>
diff --git a/apps/web/components/sections/shared/developer-programs-section.tsx b/apps/web/components/sections/shared/developer-programs-section.tsx
index 06e6762d92..b6f361f660 100644
--- a/apps/web/components/sections/shared/developer-programs-section.tsx
+++ b/apps/web/components/sections/shared/developer-programs-section.tsx
@@ -24,10 +24,7 @@ export function DeveloperProgramsSection({
   const previewRfps = rfps.filter((rfp) => !rfp.featured).slice(0, 4)
 
   return (
-    <section
-      id={id}
-      className="border-t border-brand-dark-green/10 px-3 pt-6 pb-25"
-    >
+    <section id={id} className="border-t border-brand-dark-green/10 pt-6 pb-25">
       <ContentWidth>
         <h2 className="flex items-baseline gap-3 text-[24px] leading-[1.1] tracking-[-0.24px] whitespace-nowrap">
           <span className="font-display text-brand-dark-green/50">{index}</span>