diff --git a/apps/landing/devup.json b/apps/landing/devup.json index 3c94c0b2..bb2cabc3 100644 --- a/apps/landing/devup.json +++ b/apps/landing/devup.json @@ -2,19 +2,19 @@ "theme": { "colors": { "light": { - "primary": "#6159D4", + "primary": "#5A44FF", "secondary": "#85A5F2", "link": "#006BFF", "text": "#2F2F2F", - "background": "#FFFFFF", - "containerBackground": "#FFFFFF", + "background": "#FFF", + "containerBackground": "#FFF", "border": "#E0E0E0", "success": "#4CAF50", "warning": "#FF9800", "error": "#F44336", "info": "#2196F3", - "base": "#FFFFFF", - "negativeBase": "#000000", + "base": "#FFF", + "negativeBase": "#000", "title": "#1A1A1A", "caption": "#A9A8B4", "shadow": "#87878740", @@ -25,9 +25,9 @@ "third": "#918AE9", "buttonBlueHover": "#1453AC", "buttonBlueActive": "#19498B", - "textReverse": "#FFFFFF", + "textReverse": "#FFF", "footerTitle": "#A3A4B4", - "footerBg": "#E6E7ED", + "footerBg": "#F4F4F6", "footerText": "#51575F", "menuHover": "#F6F4FF", "menuActive": "#EAE8FC", @@ -38,7 +38,7 @@ "kakaoButtonActive": "#B77D00", "imageBorder": "#C8C7D1", "imageDropdown": "#ECECEC", - "imagePlaceholder": "#999999", + "imagePlaceholder": "#999", "imageDate": "#C9C9C9", "imageDateNone": "#F2F2F2", "imageProgress": "#DADADA", @@ -47,19 +47,19 @@ "starBg": "#F7F8FF" }, "dark": { - "primary": "#6670F9", + "primary": "#9086FF", "secondary": "#2A4586", "link": "#006BFF", "text": "#EDEDED", "background": "#131313", - "containerBackground": "#1E1E1E", - "border": "#333333", + "containerBackground": "#373639", + "border": "#333", "success": "#4CAF50", "warning": "#FF9800", "error": "#F44336", "info": "#2196F3", - "base": "#000000", - "negativeBase": "#FFFFFF", + "base": "#000", + "negativeBase": "#FFF", "title": "#FAFAFA", "caption": "#787878", "shadow": "#62626240", @@ -73,7 +73,7 @@ "textReverse": "#2F2F2F", "footerTitle": "#A3A4B4", "footerBg": "#2E303C", - "footerText": "#FFFFFF", + "footerText": "#FFF", "menuHover": "#3C404B", "menuActive": "#283259", "captionBold": "#9C9BA9", @@ -86,7 +86,7 @@ "imagePlaceholder": "#4C4C4C", "imageDate": "#636363", "imageDateNone": "#343333", - "imageProgress": "#444444", + "imageProgress": "#444", "imageMenuBg": "#262626", "imageMenuSelect": "#3F3F3F", "starBg": "#232323" @@ -112,7 +112,8 @@ "fontSize": "52px", "lineHeight": 1.3, "letterSpacing": "-0.03em" - } + }, + null ], "h6Reg": [ { @@ -133,7 +134,8 @@ "fontSize": "24px", "lineHeight": 1.3, "letterSpacing": "-0.03em" - } + }, + null ], "buttonL": [ { @@ -154,7 +156,8 @@ "fontSize": "20px", "lineHeight": 1.3, "letterSpacing": "-0.03em" - } + }, + null ], "code": [ { @@ -175,7 +178,8 @@ "fontSize": "15px", "lineHeight": 1.5, "letterSpacing": "-0.03em" - } + }, + null ], "buttonM": [ { @@ -196,7 +200,8 @@ "fontSize": "17px", "lineHeight": 1.3, "letterSpacing": "-0.03em" - } + }, + null ], "h4": [ { @@ -217,7 +222,8 @@ "fontSize": "36px", "lineHeight": 1.3, "letterSpacing": "-0.03em" - } + }, + null ], "body": [ { @@ -238,7 +244,8 @@ "fontSize": "16px", "lineHeight": 1.5, "letterSpacing": "-0.03em" - } + }, + null ], "h6": [ { @@ -255,11 +262,12 @@ { "fontFamily": "Pretendard", "fontStyle": "normal", - "fontWeight": 700, + "fontWeight": 600, "fontSize": "24px", "lineHeight": 1.3, "letterSpacing": "-0.03em" - } + }, + null ], "textS": { "fontFamily": "Pretendard", @@ -288,7 +296,8 @@ "fontSize": "18px", "lineHeight": 1.3, "letterSpacing": "-0.03em" - } + }, + null ], "buttonLsemiB": [ { @@ -309,7 +318,8 @@ "fontSize": "18px", "lineHeight": 1.3, "letterSpacing": "-0.03em" - } + }, + null ], "h2": [ { @@ -330,7 +340,8 @@ "fontSize": "48px", "lineHeight": 1.3, "letterSpacing": "-0.03em" - } + }, + null ], "h3": [ { @@ -351,7 +362,8 @@ "fontSize": "42px", "lineHeight": 1.3, "letterSpacing": "-0.03em" - } + }, + null ], "h5": [ { @@ -372,7 +384,8 @@ "fontSize": "30px", "lineHeight": 1.3, "letterSpacing": "-0.03em" - } + }, + null ], "buttonS": [ { @@ -393,7 +406,8 @@ "fontSize": "15px", "lineHeight": 1.3, "letterSpacing": "-0.03em" - } + }, + null ], "caption": { "fontFamily": "Pretendard", @@ -422,7 +436,8 @@ "fontSize": "12px", "lineHeight": 1.4, "letterSpacing": "-0.03em" - } + }, + null ], "buttonSmid": [ { @@ -443,7 +458,8 @@ "fontSize": "15px", "lineHeight": 1.3, "letterSpacing": "-0.03em" - } + }, + null ], "captionBold": [ { @@ -464,16 +480,31 @@ "fontSize": "14px", "lineHeight": 1.3, "letterSpacing": "-0.03em" - } + }, + null + ], + "textSbold": [ + { + "fontFamily": "Pretendard", + "fontStyle": "normal", + "fontWeight": 700, + "fontSize": "13px", + "lineHeight": 1.4, + "letterSpacing": "-0.03em" + }, + null, + null, + null, + { + "fontFamily": "Pretendard", + "fontStyle": "normal", + "fontWeight": 700, + "fontSize": "15px", + "lineHeight": 1.4, + "letterSpacing": "-0.03em" + }, + null ], - "textSbold": { - "fontFamily": "Pretendard", - "fontStyle": "normal", - "fontWeight": 700, - "fontSize": "15px", - "lineHeight": 1.4, - "letterSpacing": "-0.03em" - }, "textL": [ { "fontFamily": "Pretendard", @@ -493,7 +524,8 @@ "fontSize": "18px", "lineHeight": 1.5, "letterSpacing": "-0.03em" - } + }, + null ], "footerMenu": [ { @@ -514,7 +546,8 @@ "fontSize": "14px", "lineHeight": 1.4, "letterSpacing": "-0.03em" - } + }, + null ], "bodyReg": [ { @@ -535,7 +568,8 @@ "fontSize": "16px", "lineHeight": 1.5, "letterSpacing": "-0.03em" - } + }, + null ], "smallBold": { "fontFamily": "Pretendard", diff --git a/apps/landing/public/icons/crown.svg b/apps/landing/public/icons/crown.svg new file mode 100644 index 00000000..ac3ae999 --- /dev/null +++ b/apps/landing/public/icons/crown.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/landing/public/icons/devup-ui-card.svg b/apps/landing/public/icons/devup-ui-card.svg new file mode 100644 index 00000000..e7d1cd61 --- /dev/null +++ b/apps/landing/public/icons/devup-ui-card.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/apps/landing/public/icons/link.svg b/apps/landing/public/icons/link.svg new file mode 100644 index 00000000..c2fe0c7b --- /dev/null +++ b/apps/landing/public/icons/link.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/landing/public/top-banner.webp b/apps/landing/public/top-banner.webp new file mode 100644 index 00000000..b07c64e8 Binary files /dev/null and b/apps/landing/public/top-banner.webp differ diff --git a/apps/landing/src/app/Bench.tsx b/apps/landing/src/app/Bench.tsx new file mode 100644 index 00000000..529dc71e --- /dev/null +++ b/apps/landing/src/app/Bench.tsx @@ -0,0 +1,108 @@ +import { Box, Flex, Text, VStack } from '@devup-ui/react' + +import { DevupUICard } from './DevupUICard' +import { OtherCard } from './OtherCard' + +export function Bench() { + return ( + + + + + Comparison Bechmarks + + + Next.js Build Time and Build Size (github action - ubuntu-latest) + + + + + + + + + + + + {[ + { + title: 'Chakra UI', + version: '3.24.2', + buildTime: '29.3s', + buildSize: '186.2MB', + url: 'https://chakra-ui.com', + }, + { + title: 'Mui', + version: '7.3.1', + buildTime: '21.6s', + buildSize: '84.3MB', + url: 'https://mui.com', + }, + { + title: 'Kuma UI', + version: '1.5.9', + buildTime: '20.6s', + buildSize: '60.3MB', + url: 'https://kuma-ui.com', + }, + { + title: 'Tailwindcss', + version: '4.1.13', + buildTime: '20.2s', + buildSize: '54.7MB', + url: 'https://tailwindcss.com', + }, + { + title: 'panda CSS', + version: '1.3.1', + buildTime: '22.0s', + buildSize: '59.5MB', + url: 'https://panda-css.com', + }, + { + title: 'styleX', + version: '0.15.4', + buildTime: '38.9s', + buildSize: '72.7MB', + url: 'https://stylexjs.com', + }, + { + title: 'vanilla extract', + version: '1.17.4', + buildTime: '20.1s', + buildSize: '56.6MB', + url: 'https://vanilla-extract.style', + }, + ].map((item) => ( + + ))} + + + + + ) +} diff --git a/apps/landing/src/app/DevupUICard.tsx b/apps/landing/src/app/DevupUICard.tsx new file mode 100644 index 00000000..ca434e34 --- /dev/null +++ b/apps/landing/src/app/DevupUICard.tsx @@ -0,0 +1,86 @@ +import { Box, Flex, Image, Text, VStack } from '@devup-ui/react' + +export function DevupUICard() { + return ( + + + + + Devup-ui + + + 1.0.15 + + + + + + Next.js Build Time + + + + + 16.8s + + + + + + Bulid Size + + + + + 51.2MB + + + + + + ) +} diff --git a/apps/landing/src/app/Feature.tsx b/apps/landing/src/app/Feature.tsx new file mode 100644 index 00000000..2d8e1ec8 --- /dev/null +++ b/apps/landing/src/app/Feature.tsx @@ -0,0 +1,134 @@ +import { Box, css, Flex, Grid, Image, Text, VStack } from '@devup-ui/react' +import Link from 'next/link' + +const FEATURES = [ + { + icon: '/idea.svg', + title: 'Zero Runtime', + desc: 'A futuristic design that eliminates the root causes of performance degradation.', + }, + { + icon: '/trophy.svg', + title: 'Top Performance', + desc: 'The fastest build speed and the smallest bundle size among CSS-in-JS solutions.', + }, + { + icon: '/heart.svg', + title: 'Type Safety', + desc: 'Enhanced DX with typing-based support.', + }, + { + icon: '/notice.svg', + title: 'Figma Plugin', + desc: 'A Figma plugin enabling safer and faster development.', + extra: ( + + + + ), + }, +] + +export function Feature() { + return ( + + + + + Features + + + Devup UI offers a performance-optimized CSS-in-JS system, theme + typing, + and amazing features for faster and safer development. + + + + {FEATURES.map(({ icon, title, desc, extra }) => ( + + + + + {title} + + + {desc} + + + {extra} + + ))} + + + + ) +} +export function Icons() { + return ( + + + + ) +} +export function FigmaButton() { + return ( + + + + + Go Figma Community + + + + + + ) +} diff --git a/apps/landing/src/app/GetStartedButton.tsx b/apps/landing/src/app/GetStartedButton.tsx new file mode 100644 index 00000000..badcd4a1 --- /dev/null +++ b/apps/landing/src/app/GetStartedButton.tsx @@ -0,0 +1,47 @@ +import { Box, css, Flex, Image, Text } from '@devup-ui/react' +import Link from 'next/link' + +export function GetStartedButton() { + return ( + + + + + + Get started + + + + + + ) +} diff --git a/apps/landing/src/app/OtherCard.tsx b/apps/landing/src/app/OtherCard.tsx new file mode 100644 index 00000000..80ffb6e6 --- /dev/null +++ b/apps/landing/src/app/OtherCard.tsx @@ -0,0 +1,65 @@ +import { css, Flex, Text, VStack } from '@devup-ui/react' +import Link from 'next/link' + +interface OtherCardProps { + title: string + version: string + buildTime: string + buildSize: string + url: string +} +export function OtherCard({ + title, + version, + buildTime, + buildSize, + url, +}: OtherCardProps) { + return ( + + + + + {title} + + + + {version} + + + + + + Bulid Time + + + {buildTime} + + + + + Bulid Size + + + {buildSize} + + + + + ) +} diff --git a/apps/landing/src/app/StarButton.tsx b/apps/landing/src/app/StarButton.tsx index a8d9c77f..9a6b9bee 100644 --- a/apps/landing/src/app/StarButton.tsx +++ b/apps/landing/src/app/StarButton.tsx @@ -28,7 +28,7 @@ export default function StarButton() { ).then((res) => res.json()) setStarCount(data.stargazers_count) } catch (error) { - console.error(error) + if (error !== 'unmounted') console.error(error) } finally { setStarCount((prev) => (typeof prev === 'number' ? prev : -1)) } @@ -36,7 +36,7 @@ export default function StarButton() { fetchStarCount() return () => { - abortController.abort() + abortController.abort('unmounted') } }, []) diff --git a/apps/landing/src/app/TopBanner.tsx b/apps/landing/src/app/TopBanner.tsx new file mode 100644 index 00000000..be533e3a --- /dev/null +++ b/apps/landing/src/app/TopBanner.tsx @@ -0,0 +1,73 @@ +import { Box, Flex, Image, Text, VStack } from '@devup-ui/react' + +import { GetStartedButton } from './GetStartedButton' +import SponsorButton from './SponsorButton' +import StarButton from './StarButton' + +export function TopBanner() { + return ( + + + + + + Zero Config +
+ Zero FOUC +
+ Zero Runtime{' '} + + CSS in JS Preprocessor + + + Building the Future of CSS-in-JS +
+ Analyze all possible scenarios at the fastest speed and style with + optimal performance. + + + + + + + + + + ) +} diff --git a/apps/landing/src/app/layout.tsx b/apps/landing/src/app/layout.tsx index 76a8d989..70c3d8ce 100644 --- a/apps/landing/src/app/layout.tsx +++ b/apps/landing/src/app/layout.tsx @@ -1,4 +1,4 @@ -import { css, globalCss, ThemeScript } from '@devup-ui/react' +import { Box, css, globalCss, ThemeScript } from '@devup-ui/react' import { resetCss } from '@devup-ui/reset-css' import type { Metadata } from 'next' @@ -86,7 +86,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= @@ -99,8 +99,10 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= /> -
- {children} + +
+ {children} +