fix(margin): simplify and use same margin for landing page (#1146)

src/app/(default)/components/FinancialContributors.tsx

@@ -1,7 +1,7 @@
 import { getSummaryReport } from '@/js/graphql/opencollective'
 import { FinancialBackerAccountType } from '@/js/types'
 import { DonateButton } from './LandingCTA'
-import { SectionContainer, Width } from './ui/SectionContainer'
+import { SectionContainer, Padding } from './ui/SectionContainer'
 /**
  * List financial contributors
  */
@@ -10,8 +10,8 @@ export const FinancialContributors: React.FC = async () => {
 
   return (
     <SectionContainer
-      width={Width.compact}
       className='bg-accent/80 rounded-box'
+      padding={Padding.default}
       header={
         <div className='flex items-center gap-6'>
           <h2>Financial Contributors</h2>

src/app/(default)/components/InternationalToC.tsx

@@ -24,7 +24,7 @@ export const InternationalToC: React.FC = () => {
 const CountryCard: React.FC<{ country: ToCCountry }> = ({ country }) => {
   const { areaName, uuid, children } = country
   return (
-    <div className='mb-10 break-inside-avoid-column break-inside-avoid'>
+    <div className='mb-10 break-inside-avoid-column'>
       <Link href={getAreaPageFriendlyUrl(uuid, areaName)}>
         <span className=' font-semibold'>{areaName}</span>
       </Link>

src/app/(default)/components/LandingHero.tsx

@@ -1,9 +1,10 @@
+import Link from 'next/link'
 import { ArrowRight } from '@phosphor-icons/react/dist/ssr'
 
 export const LandingHero: React.FC = () => {
   return (
-    <section className='w-full px-6 py-4'>
-      <h1 className='text-2xl tracking-tighter font-semibold'>Share your climbing route knowledge!</h1>
+    <section className='mt-6'>
+      <h1 className='text-2xl tracking-tighter font-bold'>Share your climbing route knowledge!</h1>
       <div className='font-medium text-neutral/80'>
         Join us to help improve this comprehensive climbing resource for the community.
       </div>
@@ -17,5 +18,5 @@ export const LandingHero: React.FC = () => {
 export const HeroAlert: React.FC = () => (
   <div className='alert alert-warning'>
     <span className='badge badge-sm badge-primary'>NEW</span>
-    <a href='/maps' className='underline flex items-center gap-1 text-sm'>Crag maps<ArrowRight size={20} /></a>
+    <Link href='/maps' className='underline flex items-center gap-1 text-sm'>Crag maps<ArrowRight size={20} /></Link>
   </div>)

src/app/(default)/components/RecentTags.tsx

@@ -1,4 +1,5 @@
 import { RecentImageCard } from '@/components/home/RecentMediaCard'
+import { SectionContainer } from './ui/SectionContainer'
 import { getMediaForFeedSC } from '@/js/graphql/gql/serverApi'
 
 /**
@@ -19,29 +20,25 @@ export const RecentTags: React.FC = async () => {
   })
 
   return (
-    <section className='w-full '>
-      <div className='px-4 2xl:px-0 mx-auto max-w-5xl xl:max-w-7xl'>
-        <h2>Latest Photos</h2>
-      </div>
 
+    <SectionContainer header={<h2>Latest Photos</h2>}>
       <div className='overflow-hidden bg-base-200/20'>
-        <hr className='border-2 border-base-content' />
         <div className='py-8 grid grid-flow-col auto-cols-max gap-x-4 overflow-x-auto'>
           {
-                recentMediaWithTags.map(media => {
-                  const { mediaUrl } = media
-                  return (
-                    <div
-                      key={mediaUrl} className='w-64 first:pl-6 2xl:first:ml-16 last:mr-16'
-                    >
-                      <RecentImageCard mediaWithTags={media} bordered />
-                    </div>
-                  )
-                }
-                )
+            recentMediaWithTags.map(media => {
+              const { mediaUrl } = media
+              return (
+                <div
+                  key={mediaUrl} className='w-64 first:pl-6 2xl:first:ml-16 last:mr-16'
+                >
+                  <RecentImageCard mediaWithTags={media} bordered />
+                </div>
+              )
+            }
+            )
               }
         </div>
       </div>
-    </section>
+    </SectionContainer>
   )
 }

src/app/(default)/components/Volunteers.tsx

@@ -1,5 +1,5 @@
 import { CodeContributorsAction } from './LandingCTA'
-import { SectionContainer, Width } from './ui/SectionContainer'
+import { SectionContainer, Padding } from './ui/SectionContainer'
 
 const url = 'https://raw.githubusercontent.com/OpenBeta/open-tacos/develop/.all-contributorsrc'
 
@@ -22,8 +22,8 @@ export const Volunteers: React.FC = async () => {
   const { contributors }: { contributors: GithubProfile[] } = await res.json()
   return (
     <SectionContainer
-      width={Width.compact}
       className='border rounded-box bg-base-200/20'
+      padding={Padding.default}
       header={
         <div className='flex items-center gap-6'>
           <h2 className='text-base-content'>Volunteers</h2>

src/app/(default)/components/ui/SectionContainer.tsx

@@ -1,23 +1,23 @@
 import { ReactNode } from 'react'
 import clx from 'classnames'
 
-export enum Width {
-  wide = '2xl:p-0',
-  compact = 'xl:p-10'
+export enum Padding {
+  none = '',
+  default = 'p-4 lg:p-8'
 }
 
 interface Props {
   header: ReactNode
   children: ReactNode
   className?: string
-  width?: Width
+  padding?: Padding
 }
 
 /**
  * Reusable wide-screen container for root page
  */
-export const SectionContainer: React.FC<Props> = ({ header, children, className = '', width = Width.wide }) => (
-  <section className={clx('block w-full p-4  mx-auto max-w-5xl xl:max-w-7xl', width, className)}>
+export const SectionContainer: React.FC<Props> = ({ header, children, className = '', padding = Padding.none }) => (
+  <section className={clx('block w-full', padding, className)}>
     {header}
     <hr className='mb-6 border-2 border-base-content' />
     {children}

src/app/(default)/page.tsx

@@ -17,14 +17,13 @@ export const revalidate = 3600 // 1 hour
 export default async function Home (): Promise<any> {
   const history = await getChangeHistoryServerSide()
   return (
-    <div>
-      <LandingHero />
-
-      <hr className='py-2 border-base-content' />
-
-      <div className='w-full flex flex-col gap-y-16'>
+    <>
+      <div className='default-page-margins'>
+        <LandingHero />
+        <hr className='my-4 border-base-content' />
+      </div>
+      <div className='default-page-margins flex flex-col gap-y-16 mb-16'>
         <div className='lg:grid lg:grid-cols-3 gap-x-2'>
-
           <div className='mt-8 lg:mt-0 lg:overflow-y-auto lg:h-[450px] w-full border-2 rounded-box'>
             <Suspense fallback={<LatestContributionsSkeleton />}>
               <LatestContributions />
@@ -38,11 +37,9 @@ export default async function Home (): Promise<any> {
         <RecentTags />
         <InternationalToC />
         <USAToC />
-        <div className='flex flex-col gap-10'>
-          <FinancialContributors />
-          <Volunteers />
-        </div>
+        <FinancialContributors />
+        <Volunteers />
       </div>
-    </div>
+    </>
   )
 }