ref: add responsive to home

frontend/src/pages/Home/index.tsx

@@ -3,23 +3,26 @@ import onlyonstarknet from 'src/assets/onlyonstarknet.png'
 import { PrimaryButton, SecondaryButton } from 'src/components/Button'
 import Box from 'src/theme/components/Box'
 import { Column, Row } from 'src/theme/components/Flex'
-import * as Text from 'src/theme/components/Text'
-import clsx from 'clsx'
-
 import * as styles from './style.css'
 
 export default function HomePage() {
   return (
-    <Box>
-      <Box as="span" className={clsx(styles.backgroundContainer, styles.background)} />
+    <Box className={styles.container}>
+      <Box as="span" className={styles.backgroundContainer}>
+        <Box as="span" className={styles.background} />
+      </Box>
+
       <Column className={styles.titleContainer}>
-        <Text.HeadlineLarge className={styles.title}>Unruggable Memecoin</Text.HeadlineLarge>
+        <h1 className={styles.title}>Unruggable Meme</h1>
         <Box as="img" src={onlyonstarknet} className={styles.subtitle} />
       </Column>
 
       <Column as="article" className={styles.firstArticle}>
-        <Text.HeadlineMedium>The pioneer framework to build safer memecoins</Text.HeadlineMedium>
-        <Row gap="16">
+        <p>
+          Tired of getting rugpulled? Introducing Unruggable Meme, a memecoin standard and deployment tool designed to
+          ensure a maximum safety for memecoin traders.
+        </p>
+        <Row gap="16" className={styles.buttonContainer}>
           <Link to="/launch">
             <PrimaryButton className={styles.firstArticleButton}>Launch</PrimaryButton>
           </Link>
@@ -29,22 +32,6 @@ export default function HomePage() {
           </Link>
         </Row>
       </Column>
-
-      <Column as="article" className={styles.secondArticle}>
-        <Box>
-          <Text.Custom color="text2" marginLeft="8" fontWeight="normal" fontSize="18">
-            Meet Unruggable Meme
-          </Text.Custom>
-
-          <Text.Body>
-            Tired of getting rugpulled? Introducing Unruggable Memecoin, a project designed with security and
-            transparency at its core. Your go-to platform for deploying safer memecoins on starknet.
-            <br />
-            <br />
-            Our innovative contracts and safeguards ensure a fair and secure experience for all users.
-          </Text.Body>
-        </Box>
-      </Column>
     </Box>
   )
 }

frontend/src/pages/Home/style.css.ts

@@ -2,6 +2,17 @@ import { style } from '@vanilla-extract/css'
 import { transparentize } from 'polished'
 import { sprinkles, vars } from 'src/theme/css/sprinkles.css'
 
+export const container = style([
+  {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+    overflow: 'auto',
+  },
+])
+
 export const backgroundContainer = style([
   {
     zIndex: '-99',
@@ -39,30 +50,39 @@ export const background = style([
 export const titleContainer = sprinkles({
   textAlign: 'center',
   gap: '16',
+  paddingX: '32',
 })
 
 export const title = style([
   {
-    fontSize: '96px',
     textShadow: '4px 4px 0 #000000',
+    color: 'white',
   },
   sprinkles({
     marginTop: '42',
+    marginBottom: '0',
+    fontSize: { md: '48', lg: '96' },
   }),
 ])
 
 export const subtitle = style([
   sprinkles({
-    maxHeight: '64',
+    maxHeight: { sm: '18', md: '32', lg: '32' },
     marginX: 'auto',
   }),
 ])
 
 export const firstArticle = style([
   sprinkles({
-    marginTop: '128',
+    marginTop: '42',
     gap: '24',
+    display: 'flex',
     alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: 'normal',
+    paddingX: { sm: '32', md: '64' },
+    fontSize: { sm: '18', md: '24', lg: '24' },
+    color: 'white',
   }),
 ])
 
@@ -72,6 +92,16 @@ export const firstArticleButton = style([
   }),
 ])
 
+export const buttonContainer = style([
+  {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+    flexWrap: 'wrap',
+  },
+])
+
 export const secondArticle = style([
   sprinkles({
     position: 'absolute',

frontend/src/theme/css/sprinkles.css.ts

@@ -162,6 +162,11 @@ export const vars = createGlobalTheme(':root', {
     '24': '24px',
     '28': '28px',
     '32': '32px',
+    '36': '36px',
+    '42': '42px',
+    '48': '48px',
+    '64': '64px',
+    '96': '96px',
   },
   lineHeight: {
     auto: 'auto',