feat: improve home ui

penx-labs · Apr 26, 2024 · ff5d8db · ff5d8db
1 parent a1a8f89
commit ff5d8db
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 17 deletions.
diff --git a/apps/home/public/images/editor-phone.jpeg b/apps/home/public/images/editor-phone.jpeg
diff --git a/apps/home/public/images/editor-phone.jpg b/apps/home/public/images/editor-phone.jpg
diff --git a/apps/home/public/images/editor.jpeg b/apps/home/public/images/editor.jpeg
diff --git a/apps/home/public/images/editor.png b/apps/home/public/images/editor.png
diff --git a/apps/home/src/components/HomePage/HomePage.tsx b/apps/home/src/components/HomePage/HomePage.tsx
@@ -13,7 +13,7 @@ export function HomePage() {
         <Box
           text={[28, 50, 70]}
           maxW-800
-          fontBlack
+          fontBold
           leadingNone
           textCenter
           black
@@ -48,7 +48,7 @@ export function HomePage() {
           ))}
         </Box>
 
-        <Box
+        {/* <Box
           black
           brand500
           brand600--hover
@@ -63,14 +63,15 @@ export function HomePage() {
           target="_blank"
         >
           Why we build PenX?
-        </Box>
+        </Box> */}
 
         <Box>
           <Button
             size={56}
-            // colorScheme="black"
-            bgGradientX={['brand500', 'fuchsia600']}
-            bgGradientX--hover={['brand400', 'fuchsia500']}
+            colorScheme="black"
+            // variant="outline"
+            // bgGradientX={['brand500', 'fuchsia600']}
+            // bgGradientX--hover={['brand400', 'fuchsia500']}
             roundedFull
             w-240
             onClick={() => {
@@ -81,11 +82,29 @@ export function HomePage() {
           </Button>
         </Box>
 
-        <Box
-          as="img"
-          src="/images/editor.png"
-          w={['100%', '100%', 760, 840, 1200]}
-        />
+        <Box relative mt20 mb40>
+          <Box
+            display={['none', 'none', 'flex']}
+            as="img"
+            src="/images/editor.png"
+            shadow="0px 1px 19px 0px rgba(42,44,48,.06),0px 0px 48px 0px hsla(30,78%,91%,.6)"
+            border
+            borderNeutral200--T20
+            rounded-12
+            w={['100%', '100%', 760, 840, 1200]}
+          />
+
+          <Box
+            as="img"
+            src="/images/editor-phone.jpg"
+            shadow="0px 1px 19px 0px rgba(42,44,48,.06),0px 0px 48px 0px hsla(30,78%,91%,.6)"
+            rounded-8
+            w={['100%', '100%', 200, 220, 280]}
+            absolute={[false, false, true]}
+            right={[-40]}
+            bottom={[0]}
+          />
+        </Box>
       </Box>
     </Box>
   )

diff --git a/apps/home/src/layouts/BasicLayout/index.tsx b/apps/home/src/layouts/BasicLayout/index.tsx
@@ -15,7 +15,7 @@ export const BasicLayout: FC<PropsWithChildren> = ({ children }) => {
         toBetween={[false, true]}
         toCenterX={[true, false]}
         py3
-        w={['98%', '98%', '100%']}
+        w={['98%', '98%', '100%', 1200, 1400]}
         relative
         zIndex-10
         px={[20, 20, 20, 20]}
@@ -40,6 +40,7 @@ export const BasicLayout: FC<PropsWithChildren> = ({ children }) => {
             // size="lg"
             variant="outline"
             roundedFull
+            colorScheme="black"
             onClick={() => {
               window.open('https://app.penx.io')
             }}

diff --git a/apps/home/src/pages/_document.tsx b/apps/home/src/pages/_document.tsx
@@ -46,6 +46,11 @@ class MyDocument extends Document {
               data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID!}
             ></script>
           )}
+
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=optional"
+          />
         </Head>
         <body>
           <Main />

diff --git a/apps/home/src/styles/globals.css b/apps/home/src/styles/globals.css
@@ -7,9 +7,20 @@ body {
     sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
     'Noto Color Emoji'; */
 
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-family:
+    'Poppins',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    'Noto Sans',
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji';
 
   /* fix for vaul */
   pointer-events: auto !important;

diff --git a/apps/web/src/pages/_document.tsx b/apps/web/src/pages/_document.tsx
@@ -124,7 +124,7 @@ class MyDocument extends Document {
 
           <link
             rel="stylesheet"
-            href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,600,700,800,900&display=optional"
+            href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=optional"
           />
 
           {process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID && (

diff --git a/apps/web/src/styles/globals.css b/apps/web/src/styles/globals.css
@@ -5,8 +5,9 @@ body {
   /* font-size: 14px; */
 
   /* 'Poppins', */
+  /* Roboto */
   font-family:
-    'Roboto',
+    'Poppins',
     -apple-system,
     BlinkMacSystemFont,
     'Segoe UI',