Feat landing showcase

apps/landing/src/app/(detail)/showcase/page.tsx

@@ -0,0 +1,114 @@
+import { Text, VStack } from '@devup-ui/react'
+
+import { ShowcaseContent } from '@/components/showcase/ShowcaseContent'
+
+const SHOWCASE_LIST = [
+  {
+    id: 'devfive',
+    name: 'Devfive',
+    image: '/showcase/devfive.webp',
+    type: 'website',
+    link: 'https://devfive.kr',
+  },
+  {
+    id: 'braillify',
+    name: 'Braillify',
+    image: '/showcase/braillify.webp',
+    type: 'website',
+    link: 'https://braillify.kr',
+  },
+  {
+    id: 'ideocean',
+    name: 'IDeOcean',
+    image: '/showcase/ideocean.webp',
+    type: 'website',
+    link: 'https://ideaocean.ai/',
+  },
+  {
+    id: 'ongle',
+    name: 'Ongle',
+    image: '/showcase/ongle.webp',
+    type: 'website',
+    link: 'https://easy-read.co.kr',
+  },
+  {
+    id: 'laon_singcraft',
+    name: 'Laon Singcraft',
+    image: '/showcase/laon_singcraft.webp',
+    type: 'website',
+    link: 'https://laonswingcraft.com/',
+  },
+  {
+    id: 'point_park',
+    name: 'PointPark',
+    image: '/showcase/point_park.webp',
+    type: 'mobile',
+    link: 'https://play.google.com/store/apps/details?id=com.pointpark.popaArdApp&hl=ko',
+  },
+  {
+    id: 'nh_allone_bank',
+    name: 'NH Allone Bank',
+    image: '/showcase/nh_allone_bank.webp',
+    type: 'mobile',
+    link: 'https://play.google.com/store/apps/details?id=com.nonghyup.nhallonebank',
+  },
+  {
+    id: 'your_test',
+    name: 'Your Test',
+    image: '/showcase/your_test.webp',
+    type: 'website',
+    link: 'https://www.yourtest.kr/',
+  },
+  {
+    id: 'util_support',
+    name: 'Util Support',
+    image: '/showcase/util_support.webp',
+    type: 'website',
+    link: 'https://util.support/',
+  },
+  {
+    id: 'justq',
+    name: 'Justq',
+    image: '/showcase/justq.webp',
+    type: 'website',
+    link: 'https://www.justq.com/',
+  },
+  {
+    id: 'kavia',
+    name: 'Kavia',
+    image: '/showcase/kavia.webp',
+    type: 'website',
+    link: 'https://kavia.org/',
+  },
+  {
+    id: 'boratial',
+    name: 'Boratial',
+    image: '/showcase/boratial.webp',
+    type: 'website',
+    link: 'https://www.boratr.co.kr',
+  },
+]
+
+export default function Page() {
+  return (
+    <VStack
+      gap="30px"
+      maxW="1032px"
+      mx="auto"
+      overflow="hidden"
+      px={['20px', '30px', null, '40px', '60px']}
+      py="40px"
+      w="100%"
+    >
+      <VStack gap="12px">
+        <Text color="$title" typography="h4">
+          Showcase
+        </Text>
+        <Text color="$text" typography="bodyReg">
+          Showcasing a variety of websites built with Devup UI
+        </Text>
+      </VStack>
+      <ShowcaseContent list={SHOWCASE_LIST} />
+    </VStack>
+  )
+}

apps/landing/src/components/Header/index.tsx

@@ -130,6 +130,16 @@ export function Header() {
             <Menu keyword="components">Components</Menu>
           </Link>
         </Flex>
+        <Flex alignItems="center" px={[null, null, '0', '24px']}>
+          <Link
+            className={css({
+              textDecoration: 'none',
+            })}
+            href="/showcase"
+          >
+            <Menu keyword="showcase">Showcase</Menu>
+          </Link>
+        </Flex>
         <Flex alignItems="center" px={[null, null, '0', '24px']}>
           <Link
             className={css({

apps/landing/src/components/showcase/ShowcaseCard.tsx

@@ -0,0 +1,47 @@
+import { Box, Flex, Image, Text, VStack } from '@devup-ui/react'
+
+interface ShowcaseCardProps {
+  name: string
+  image: string
+}
+export function ShowcaseCard({ name, image }: ShowcaseCardProps) {
+  return (
+    <VStack cursor="pointer" gap="8px" role="group">
+      <Box h="auto" overflow="hidden" w="100%">
+        <Image
+          _groupHover={{ transform: 'scale(1.1)' }}
+          aspectRatio="1.77"
+          h="100%"
+          src={image}
+          transition="transform 0.3s"
+          w="100%"
+        />
+      </Box>
+      <Flex alignItems="center" gap="12px">
+        <Text
+          color="#000"
+          flex="1"
+          overflow="hidden"
+          textOverflow="ellipsis"
+          typography="textL"
+          whiteSpace="nowrap"
+        >
+          {name}
+        </Text>
+        <Flex alignItems="center" gap="4px">
+          <Text color="$caption" typography="small">
+            Visit Site
+          </Text>
+          <Box
+            bg="$text"
+            boxSize="16px"
+            maskImage="url(/icons/link.svg)"
+            maskPos="center"
+            maskRepeat="no-repeat"
+            maskSize="contain"
+          />
+        </Flex>
+      </Flex>
+    </VStack>
+  )
+}

apps/landing/src/components/showcase/ShowcaseContent.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import { css, Flex, Grid, Text } from '@devup-ui/react'
+import Link from 'next/dist/client/link'
+import { useMemo, useState } from 'react'
+
+import { ShowcaseCard } from '@/components/showcase/ShowcaseCard'
+
+const SEGMENT_LIST = ['All', 'Website', 'Mobile'] as const
+type SegmentType = (typeof SEGMENT_LIST)[number]
+
+interface ShowcaseItem {
+  id: string
+  name: string
+  image: string
+  type: string
+  link: string
+}
+
+interface ShowcaseContentProps {
+  list: ShowcaseItem[]
+}
+
+export function ShowcaseContent({ list }: ShowcaseContentProps) {
+  const [segment, setSegment] = useState<SegmentType>('All')
+
+  const filteredList = useMemo(
+    () =>
+      segment === 'All'
+        ? list
+        : list.filter((item) => item.type === segment.toLowerCase()),
+    [segment, list],
+  )
+
+  return (
+    <>
+      <Flex
+        alignItems="center"
+        bg="$menuHover"
+        borderRadius="50px"
+        p="6px"
+        w="fit-content"
+      >
+        {SEGMENT_LIST.map((item) => (
+          <Flex
+            key={item}
+            alignItems="center"
+            as="button"
+            bg={segment === item ? '$containerBackground' : 'transparent'}
+            border="none"
+            borderRadius="999px"
+            boxShadow={segment === item ? '0 0 4px 0 #5A44FF33' : 'none'}
+            cursor="pointer"
+            justifyContent="center"
+            onClick={() => setSegment(item)}
+            px="30px"
+            py="10px"
+            transition="all 0.2s"
+          >
+            <Text
+              color={segment === item ? '$primary' : '$caption'}
+              typography="buttonM"
+            >
+              {item}
+            </Text>
+          </Flex>
+        ))}
+      </Flex>
+      <Grid
+        columnGap="24px"
+        gridTemplateColumns={[null, 'repeat(3, 1fr)']}
+        rowGap="36px"
+      >
+        {filteredList.map((showcase) => (
+          <Link
+            key={showcase.id}
+            className={css({ textDecoration: 'none' })}
+            href={showcase.link}
+            rel="noopener"
+            target="_blank"
+          >
+            <ShowcaseCard {...showcase} />
+          </Link>
+        ))}
+      </Grid>
+    </>
+  )
+}