Merge pull request #19 from 0xChqrles/feat/homepage

Feat/homepage

frontend/craco.config.cjs

@@ -12,9 +12,6 @@ const isProduction = process.env.NODE_ENV === 'production'
 const shouldLintOrTypeCheck = !isProduction
 
 module.exports = {
-  babel: {
-    plugins: ['@vanilla-extract/babel-plugin'],
-  },
   eslint: {
     enable: shouldLintOrTypeCheck,
     pluginOptions(eslintConfig) {

frontend/package.json

@@ -38,7 +38,6 @@
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
     "@uniswap/eslint-config": "^1.2.0",
-    "@vanilla-extract/babel-plugin": "^1.2.0",
     "@vanilla-extract/webpack-plugin": "^2.2.0",
     "css-loader": "^6.7.3",
     "eslint": "^8.55.0",

frontend/src/App.tsx

@@ -1,46 +1,34 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 
-import NavBar from './components/NavBar'
+import AppLayout from './components/Layout/App'
+import HomeLayout from './components/Layout/Home'
 import HomePage from './pages/Home'
 import LaunchPage from './pages/Launch'
 import ManagePage from './pages/Manage'
 
-interface LayoutWrapperProps {
-  children: React.ReactNode
-}
-
-function LayoutWrapper({ children }: LayoutWrapperProps) {
-  return (
-    <>
-      <NavBar />
-      {children}
-    </>
-  )
-}
-
 const router = createBrowserRouter([
   {
     path: '/',
     element: (
-      <LayoutWrapper>
+      <HomeLayout>
         <HomePage />
-      </LayoutWrapper>
+      </HomeLayout>
     ),
   },
   {
     path: '/launch',
     element: (
-      <LayoutWrapper>
+      <AppLayout>
         <LaunchPage />
-      </LayoutWrapper>
+      </AppLayout>
     ),
   },
   {
     path: '/manage',
     element: (
-      <LayoutWrapper>
+      <AppLayout>
         <ManagePage />
-      </LayoutWrapper>
+      </AppLayout>
     ),
   },
 ])

frontend/src/components/Button/style.css.ts

@@ -20,19 +20,11 @@ export const primaryButton = style([
   sprinkles({
     paddingX: '16',
     border: 'none',
-    background: {
-      default: 'accent',
-      hover: 'accentDark',
-      focus: 'accentDarker',
-      active: 'accentDarker',
-    },
-    outlineStyle: 'solid',
-    outlineWidth: '1px',
-    outlineColor: {
-      default: 'transparent',
-      hover: 'accentDark',
-      focus: 'accentDarker',
-      active: 'accentDarker',
+    background: 'accentGradient',
+    opacity: {
+      hover: 'hover',
+      focus: 'focus',
+      active: 'focus',
     },
     color: 'text1',
   }),
@@ -54,7 +46,7 @@ export const secondaryButton = recipe({
         default: 'text2',
         hover: 'text1',
       },
-      transitionDuration: 'fast',
+      transitionDuration: '125',
     }),
   ],
 

frontend/src/components/Input/index.tsx

@@ -8,7 +8,7 @@ type InputProps = {
   addon?: React.ReactNode
 } & BoxProps
 
-const Input = forwardRef(function ({ addon, className, ...props }: InputProps, ref) {
+const Input = forwardRef<HTMLElement, InputProps>(function ({ addon, className, ...props }, ref) {
   return (
     <Box className={clsx(className, styles.inputContainer)}>
       <Box as="input" className={styles.input} {...props} ref={ref} />

frontend/src/components/Input/style.css.ts

@@ -1,7 +1,6 @@
 import { sprinkles } from 'src/theme/css/sprinkles.css'
 
 export const inputContainer = sprinkles({
-  background: 'bg2',
   display: 'flex',
   alignItems: 'center',
   borderRadius: '10',
@@ -15,8 +14,8 @@ export const inputContainer = sprinkles({
     hover: 'accent',
   },
   gap: '8',
-  transitionDuration: 'fast',
-  backgroundColor: 'bg1Transparent',
+  transitionDuration: '125',
+  backgroundColor: 'bg1',
 })
 
 export const input = sprinkles({

frontend/src/components/Layout/App/index.tsx

@@ -0,0 +1,18 @@
+import NavBar from 'src/components/NavBar'
+import Box from 'src/theme/components/Box'
+
+import * as styles from './style.css'
+
+interface AppLayoutProps {
+  children: React.ReactNode
+}
+
+export default function AppLayout({ children }: AppLayoutProps) {
+  return (
+    <>
+      <NavBar />
+      <Box as="span" className={styles.radial} />
+      {children}
+    </>
+  )
+}

frontend/src/components/Layout/App/style.css.ts

@@ -0,0 +1,16 @@
+import { style } from '@vanilla-extract/css'
+import { sprinkles } from 'src/theme/css/sprinkles.css'
+
+export const radial = style([
+  {
+    zIndex: '-1',
+  },
+  sprinkles({
+    position: 'fixed',
+    top: '0',
+    right: '0',
+    left: '0',
+    bottom: '0',
+    background: 'appGradient',
+  }),
+])

frontend/src/components/Layout/Home.tsx

@@ -0,0 +1,14 @@
+import NavBar from '../NavBar'
+
+interface HomeLayoutProps {
+  children: React.ReactNode
+}
+
+export default function HomeLayout({ children }: HomeLayoutProps) {
+  return (
+    <>
+      <NavBar />
+      {children}
+    </>
+  )
+}

frontend/src/components/NavBar/index.tsx

@@ -11,7 +11,7 @@ export default function NavBar() {
   const navigate = useNavigate()
 
   return (
-    <Box as="nav" className={styles.Nav}>
+    <Box as="nav" className={styles.nav}>
       <Row justifyContent="space-between">
         <Row gap="24">
           <Box className={styles.logoContainer}>

frontend/src/components/NavBar/style.css.ts

@@ -1,34 +1,37 @@
 import { style } from '@vanilla-extract/css'
 import { sprinkles } from 'src/theme/css/sprinkles.css'
-import { vars } from 'src/theme/css/vars.css'
 
-export const Nav = style([
-  {
-    boxShadow: `0px 8px 16px 0 ${vars.color.bg1Transparent}`,
-  },
+export const nav = style([
   sprinkles({
     position: 'sticky',
     top: '0',
     padding: '24',
-    background: 'bg1',
     zIndex: 'sticky',
   }),
 ])
 
-export const logoContainer = sprinkles({
-  color: 'text1',
-  width: '42',
-  height: '42',
-  cursor: 'pointer',
-})
+export const logoContainer = style([
+  {
+    ':hover': {
+      transform: 'rotate(5deg)',
+    },
+  },
+  sprinkles({
+    color: 'text1',
+    width: '42',
+    height: '42',
+    cursor: 'pointer',
+    transitionDuration: '125',
+  }),
+])
 
 export const navLink = sprinkles({
   fontWeight: 'medium',
+  fontSize: '18',
   paddingX: '12',
   paddingY: '8',
   borderRadius: '10',
-  background: {
-    default: 'transparent',
-    hover: 'bg2',
+  opacity: {
+    hover: '0.7',
   },
 })

frontend/src/components/WalletModal/Option.css.ts

@@ -7,5 +7,5 @@ export const option = sprinkles({
   borderRadius: '10',
   padding: '8',
   cursor: 'pointer',
-  transitionDuration: 'fast',
+  transitionDuration: '125',
 })

frontend/src/components/WalletModal/Option.tsx

@@ -1,5 +1,6 @@
 import { useConnect } from '@starknet-react/core'
 import { Connection, L2Connection } from 'src/connections'
+import Box from 'src/theme/components/Box'
 import { Row } from 'src/theme/components/Flex'
 import * as Text from 'src/theme/components/Text'
 
@@ -13,7 +14,7 @@ interface OptionProps {
 function Option({ connection, activate }: OptionProps) {
   return (
     <Row gap="12" className={styles.option} onClick={activate}>
-      <img width={32} height={32} src={connection.getIcon?.()} />
+      <Box as="img" width="32" height="32" src={connection.getIcon?.()} />
       <Text.Body>{connection.getName()}</Text.Body>
     </Row>
   )

frontend/src/pages/Home/index.tsx

@@ -0,0 +1,52 @@
+import { Link } from 'react-router-dom'
+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 * as styles from './style.css'
+
+export default function HomePage() {
+  return (
+    <Box>
+      <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>
+        <Box as="img" src={onlyonstarknet} className={styles.subtitle} />
+      </Column>
+
+      <Column as="article" className={styles.firstArticle}>
+        <Text.HeadlineMedium>The framework to build safer memecoins</Text.HeadlineMedium>
+        <Row gap="16">
+          <Link to="/launch">
+            <PrimaryButton className={styles.firstArticleButton}>Launch</PrimaryButton>
+          </Link>
+
+          <Link to="/manage">
+            <SecondaryButton className={styles.firstArticleButton}>Manage</SecondaryButton>
+          </Link>
+        </Row>
+      </Column>
+
+      <Column as="article" className={styles.secondArticle}>
+        <Box>
+          <Text.Custom color="text2" marginLeft="8" fontWeight="normal" fontSize="18">
+            Meet Unrrugable Memecoin
+          </Text.Custom>
+
+          <Text.Body>
+            Tired of getting rugpulled? Introducing Unruggable Memecoin, a project designed with security and
+            transparency at its core.
+            <br />
+            <br />
+            Our innovative contracts and safeguards ensure a fair and secure experience for all users.
+          </Text.Body>
+        </Box>
+      </Column>
+    </Box>
+  )
+}