Merge pull request #13 from dev-five-git/main

ㅁㄴㅇ

Author: belltalion

apps/landing/package.json

@@ -25,7 +25,8 @@
     "react-dom": "^19.1.1",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^15.6.6",
-    "remark-gfm": "^4.0.1"
+    "remark-gfm": "^4.0.1",
+     "lenis": "1.3.11"
   },
   "devDependencies": {
     "@devup-ui/next-plugin": "workspace:*",

apps/landing/src/app/Bench.tsx

@@ -3,6 +3,58 @@ import { Box, Flex, Text, VStack } from '@devup-ui/react'
 import { DevupUICard } from './DevupUICard'
 import { OtherCard } from './OtherCard'
 
+const OTHER_CARDS = [
+  {
+    title: 'Chakra UI',
+    version: '3.27.0',
+    buildTime: '29.99s',
+    buildSize: '200.4MB',
+    url: 'https://chakra-ui.com',
+  },
+  {
+    title: 'Mui',
+    version: '7.3.2',
+    buildTime: '22.21s',
+    buildSize: '89.9MB',
+    url: 'https://mui.com',
+  },
+  {
+    title: 'Kuma UI',
+    version: '1.5.9',
+    buildTime: '21.61s',
+    buildSize: '64.3MB',
+    url: 'https://kuma-ui.com',
+  },
+  {
+    title: 'Tailwindcss',
+    version: '4.1.13',
+    buildTime: '20.22s',
+    buildSize: '54.8MB',
+    url: 'https://tailwindcss.com',
+  },
+  {
+    title: 'panda CSS',
+    version: '1.3.1',
+    buildTime: '22.01s',
+    buildSize: '59.5MB',
+    url: 'https://panda-css.com',
+  },
+  {
+    title: 'styleX',
+    version: '0.15.4',
+    buildTime: '38.97s',
+    buildSize: '54.7MB',
+    url: 'https://stylexjs.com',
+  },
+  {
+    title: 'vanilla extract',
+    version: '1.17.4',
+    buildTime: '20.09s',
+    buildSize: '56.6MB',
+    url: 'https://vanilla-extract.style',
+  },
+]
+
 export function Bench() {
   return (
     <VStack
@@ -39,65 +91,17 @@ export function Bench() {
           scrollbarWidth="none"
         >
           <Flex
+            alignItems="flex-end"
             flexWrap={[null, null, null, null, 'wrap']}
             gap={[3, null, 5]}
             justifyContent={[null, null, null, null, 'center']}
             px={[4, null, '40px', null, 0]}
+            w="fit-content"
           >
             <Flex display={['none', null, null, null, 'flex']}>
               <DevupUICard />
             </Flex>
-            {[
-              {
-                title: 'Chakra UI',
-                version: '3.27.0',
-                buildTime: '29.99s',
-                buildSize: '210.1MB',
-                url: 'https://chakra-ui.com',
-              },
-              {
-                title: 'Mui',
-                version: '7.3.2',
-                buildTime: '22.21s',
-                buildSize: '94.23MB',
-                url: 'https://mui.com',
-              },
-              {
-                title: 'Kuma UI',
-                version: '1.5.9',
-                buildTime: '21.61s',
-                buildSize: '67.42MB',
-                url: 'https://kuma-ui.com',
-              },
-              {
-                title: 'Tailwindcss',
-                version: '4.1.13',
-                buildTime: '20.22s',
-                buildSize: '57.41MB',
-                url: 'https://tailwindcss.com',
-              },
-              {
-                title: 'Panda CSS',
-                version: '1.3.1',
-                buildTime: '21.61s',
-                buildSize: '62.43MB',
-                url: 'https://panda-css.com',
-              },
-              {
-                title: 'styleX',
-                version: '0.15.4',
-                buildTime: '38.97s',
-                buildSize: '76.25MB',
-                url: 'https://stylexjs.com',
-              },
-              {
-                title: 'Vanilla Extract',
-                version: '1.17.4',
-                buildTime: '20.09s',
-                buildSize: '59.36MB',
-                url: 'https://vanilla-extract.style',
-              },
-            ].map((item) => (
+            {OTHER_CARDS.map((item) => (
               <OtherCard key={item.title} {...item} />
             ))}
           </Flex>

apps/landing/src/app/DevupUICard.tsx

@@ -53,7 +53,7 @@ export function DevupUICard() {
               color="transparent"
               typography="h4"
             >
-              18.35s
+              18.23s
             </Text>
           </Flex>
         </VStack>
@@ -76,7 +76,7 @@ export function DevupUICard() {
               color="transparent"
               typography="h4"
             >
-              57.40MB
+              54.8MB
             </Text>
           </Flex>
         </VStack>

apps/landing/src/app/OtherCard.tsx

@@ -20,10 +20,12 @@ export function OtherCard({
       aspectRatio={[null, null, null, null, '1']}
       bg="$cardBg"
       borderRadius="20px"
+      flex="1"
       flexDir={['row', null, 'column']}
-      gap="40px"
+      gap={['20px', null, '40px']}
+      h={[null, null, null, null, '318px']}
       justifyContent="space-between"
-      minW={[null, null, '240px', null, '300px']}
+      minW={[null, null, '240px', null, 'none']}
       p={[6, null, '30px']}
     >
       <VStack gap="8px">
@@ -34,7 +36,7 @@ export function OtherCard({
           href={url}
           target="_blank"
         >
-          <Text color="$captionBold" typography="h6">
+          <Text color="$captionBold" typography="h6" whiteSpace="nowrap">
             {title}
           </Text>
         </Link>

apps/landing/src/app/TopBanner.tsx

@@ -55,7 +55,11 @@ export function TopBanner() {
             <Box as="br" display={['none', null, 'initial']} />
             CSS in JS Preprocessor
           </Text>
-          <Text color="$text" typography="h6Reg">
+          <Text
+            color="$text"
+            textShadow="0 -2px 4px var(--base, #FFF), 0 2px 4px var(--base, #FFF)"
+            typography="h6Reg"
+          >
             Building the Future of CSS-in-JS
             <br />
             Analyze all possible scenarios at the fastest speed and style with

apps/landing/src/app/layout.tsx

@@ -1,5 +1,6 @@
 import { Box, css, globalCss, ThemeScript } from '@devup-ui/react'
 import { resetCss } from '@devup-ui/reset-css'
+import ReactLenis from 'lenis/react'
 import type { Metadata } from 'next'
 
 import { Footer } from '../components/Footer'
@@ -98,12 +99,14 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
             width="0"
           />
         </noscript>
-        <SearchModal />
-        <Box bg="$background">
-          <Header />
-          {children}
-        </Box>
-        <Footer />
+        <ReactLenis options={{ duration: 1.4 }} root>
+          <SearchModal />
+          <Box bg="$background">
+            <Header />
+            {children}
+          </Box>
+          <Footer />
+        </ReactLenis>
       </body>
     </html>
   )