Finetuning

.gitignore

@@ -25,6 +25,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local

src/components/DAOStructures/index.tsx

@@ -33,7 +33,7 @@ export default function DAOStructures(props: Props) {
         className={clsxm(
           'flex-col',
           'flex',
-          'gap-x-4',
+          'gap-x-2',
           'gap-y-4',
           'items-start',
           '1_5xl:flex-wrap',

src/components/Footer.tsx

@@ -41,7 +41,10 @@ export default function Footer(props: Props) {
             'sm:-translate-y-1/2'
           )}
         >
-          <SocialIcons className='mb-5 sm:mb-10' trackingContext='footer' />
+          <SocialIcons
+            className='mb-5 mt-0 sm:mt-16 sm:mb-10'
+            trackingContext='footer'
+          />
           <div className='flex flex-wrap justify-center space-x-2 text-sm opacity-70'>
             <div>© 2022 Realms</div>
             {/**

src/components/Introduction.tsx

@@ -1,5 +1,6 @@
 import Image from 'next/image';
 import Link from 'next/link';
+import { useMediaQuery } from 'react-responsive';
 
 import trackClick from '@/lib/trackClick';
 
@@ -10,12 +11,17 @@ import Icon from '@/components/Icon';
 import Text from '@/components/Text';
 
 export default function Introduction() {
+  const isNarrow = useMediaQuery({ query: `(max-width: 834px)` });
+  const imgClass = isNarrow
+    ? 'absolute -top-[295px] left-1/2 -z-10 h-[844px] w-[1800px] -translate-x-[640px]'
+    : 'absolute -top-[275px] left-1/2 -z-10 h-[844px] w-[1800px] -translate-x-[1072px]';
+
   return (
     // The page gets sized by the overflowing hero image. To keep the page
     // width from being affected by the hero, we need to add an
     // 'overflow-hidden' to the container div
     <div className='relative overflow-hidden'>
-      <div className='absolute -top-[275px] left-1/2 -z-10 h-[844px] w-[1800px] -translate-x-1/2'>
+      <div className={imgClass}>
         <Image
           priority
           className='w-full'

src/components/ManagingDAOs/index.tsx

@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import { useMediaQuery } from 'react-responsive';
 
 import clsxm from '@/lib/clsxm';
 
@@ -9,15 +10,19 @@ import CONFIG from './config';
 import Section from './Section';
 
 export default function ManagingDAOs() {
+  const isNarrow = useMediaQuery({ query: `(max-width: 834px)` });
+  const imgClass = isNarrow
+    ? 'absolute -z-10 top-0 -left-[800px] bottom-0 -right-60 bg-[#201F27]'
+    : 'absolute -z-10 h-full w-full bg-[#201F27]';
+
   return (
-    <div className='relative'>
-      <div className='absolute -z-10 h-full w-full bg-[#201F27]'>
+    <div className='relative overflow-hidden'>
+      <div className={imgClass}>
         <Image
           className='w-full'
           alt='hero image'
           src='/backgrounds/managing-dao.png'
           layout='fill'
-          objectFit='cover'
         />
       </div>
       <CenteredContent className='px-5'>

src/components/Metrics/index.tsx

@@ -7,7 +7,7 @@ import GrowingValue from '@/components/Metrics/GrowingValue';
 
 export default function Metrics() {
   return (
-    <div className='bg-[#201F27]'>
+    <div className='bg-nightgrey'>
       <CenteredContent
         className={clsxm(
           'flex-col',

tailwind.config.js

@@ -45,7 +45,7 @@ module.exports = {
       colors: {
         'landing-theme': {
           background: '#292833',
-          nightgrey: '#292833',
+          nightgrey: '#201f27',
         },
         background: 'var(--background)',
         nightgrey: 'var(--nightgrey)',