style(web): simplify section component class names by removing redundant padding

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>

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">

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

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}

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}

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>

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>