feat: add styled components for homepage layout and structure

Author: rmariuzzo

src/pages/index.styles.ts

@@ -0,0 +1,79 @@
+import styled from 'styled-components'
+
+import { Link } from '../components/Link'
+import { $theme } from '../styles/theme'
+import { theme } from '../theme'
+
+export const Hero = styled.div`
+  text-align: center;
+  padding: 3rem 0 4rem;
+`
+
+export const Greeting = styled.h1`
+  font-size: ${$theme.fontSize.l2}rem;
+  font-weight: ${$theme.fontWeight.black};
+  color: ${$theme.color.copy};
+  line-height: 1;
+  margin: 0 0 0.75rem;
+
+  ${theme.breakpoints.up('lg')} {
+    font-size: ${$theme.fontSize.l1}rem;
+  }
+`
+
+export const CardGrid = styled.div`
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.5rem;
+  padding-bottom: 4rem;
+
+  ${theme.breakpoints.up('md')} {
+    grid-template-columns: 1fr 1fr;
+  }
+`
+
+export const Card = styled(Link)`
+  display: flex;
+  flex-direction: column;
+  border: ${$theme.color.secondary} solid 2px;
+  border-radius: 4px;
+  padding: 2rem;
+  text-decoration: none;
+  color: ${$theme.color.copy};
+  transition: ${$theme.transition.default};
+
+  &:hover {
+    border-color: ${$theme.color.primary};
+    background-color: ${$theme.color.primary}0a;
+  }
+`
+
+export const CardIcon = styled.div`
+  font-family: 'Source Code Pro', Consolas, Monaco, monospace;
+  font-size: 1.75rem;
+  color: ${$theme.color.primary};
+  margin-bottom: 1.25rem;
+  line-height: 1;
+`
+
+export const CardTitle = styled.h2`
+  font-size: ${$theme.fontSize.l2}rem;
+  font-weight: ${$theme.fontWeight.black};
+  line-height: 1;
+  margin: 0 0 0.75rem;
+`
+
+export const CardDescription = styled.p`
+  font-size: ${$theme.fontSize.copy1}rem;
+  color: ${$theme.color.copyLight};
+  margin: 0;
+  flex-grow: 1;
+`
+
+export const CardCTA = styled.span`
+  display: inline-block;
+  margin-top: 1.5rem;
+  font-size: ${$theme.fontSize.copy2}rem;
+  color: ${$theme.color.primary};
+  font-weight: ${$theme.fontWeight.semiBold};
+`

src/pages/index.tsx

@@ -1,28 +1,31 @@
 import * as React from 'react'
 
-import { Link } from '../components/Link'
 import { SEO } from '../components/SEO'
-import { TextBlock } from '../components/Typography'
 import { MainLayout } from '../layouts/MainLayout'
+import * as S from './index.styles'
 
 export const Head = () => <SEO title="Home" />
 
 const IndexPage: React.FC = () => {
   return (
     <MainLayout>
-      <TextBlock>
-        <pre className="language-javascript">
-          <code className="language-javascript">
-            // TODO: Complete website...
-            <br />
-            // I'm currently fighting a cancer again. This is{' '}
-            <Link to="/lymphoma/2025-09-18/">the third time</Link>.
-            <br />
-            // I created a blog about it, take a look at it{' '}
-            <Link to="/lymphoma">here</Link>.
-          </code>
-        </pre>
-      </TextBlock>
+      <S.Hero>
+        <S.Greeting>Hi, I'm Rubens</S.Greeting>
+      </S.Hero>
+      <S.CardGrid>
+        <S.Card to="/code">
+          <S.CardIcon>{'{ }'}</S.CardIcon>
+          <S.CardTitle>Code</S.CardTitle>
+          <S.CardDescription>I build things.</S.CardDescription>
+          <S.CardCTA>See my work →</S.CardCTA>
+        </S.Card>
+        <S.Card to="/lymphoma">
+          <S.CardIcon>♥</S.CardIcon>
+          <S.CardTitle>Lymphoma</S.CardTitle>
+          <S.CardDescription>I fight things.</S.CardDescription>
+          <S.CardCTA>Read my journey →</S.CardCTA>
+        </S.Card>
+      </S.CardGrid>
     </MainLayout>
   )
 }