Merge pull request #17 from plastic-labs/dm/review-tweaks-follow

Review Tweaks Follow

app/page.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-default-export */
 
 import { Main } from '@/components/layout/main'
-import { GetInTouchSection } from '@/components/sections/get-in-touch'
+import { ContactSection } from '@/components/sections/contact'
 import { HeroSection } from '@/components/sections/hero'
 import { PartnersSection } from '@/components/sections/partners'
 import { ProductsSection } from '@/components/sections/products'
@@ -14,7 +14,7 @@ const Page = () => {
       <ProductsSection />
       <TeamSection />
       <PartnersSection />
-      <GetInTouchSection />
+      <ContactSection />
     </Main>
   )
 }

components/sections/get-in-touch/get-in-touch.tsx → components/sections/contact/contact.tsx

@@ -4,8 +4,9 @@ import styled from 'styled-components'
 import { Contact } from '@/components/composed/contact'
 import { AsciiField } from '@/components/illos/ascii-field'
 import { Section } from '@/components/layout/section'
+import { WIDE_BREAKPOINT } from '@/styles/breakpoints'
 
-const StyledGetInTouchSection = styled(Section)`
+const StyledContactSection = styled(Section)`
   --line-width: 0.0625rem;
 
   display: grid;
@@ -22,14 +23,18 @@ const StyledGetInTouchSection = styled(Section)`
 `
 
 const StyledAsciiField = styled(AsciiField)`
-  min-height: 12rem;
+  min-height: 6rem;
+
+  @media (min-width: ${WIDE_BREAKPOINT}rem) {
+    min-height: 12rem;
+  }
 `
 
-export const GetInTouchSection: React.FC = () => {
+export const ContactSection: React.FC = () => {
   return (
-    <StyledGetInTouchSection id="contact">
+    <StyledContactSection id="contact">
       <Contact />
       <StyledAsciiField direction="vertical" inverse />
-    </StyledGetInTouchSection>
+    </StyledContactSection>
   )
 }

components/sections/contact/index.ts

@@ -0,0 +1 @@
+export { ContactSection } from './contact'