feat: 디자인 개편

Author: devstefancho

astro.config.mjs

@@ -11,6 +11,9 @@ export default defineConfig({
     starlight({
       favicon: '/favicon.ico',
       title: 'vim.kr',
+      customCss: [
+        './src/styles/global.css',
+      ],
       social: {
         discord: 'https://discord.com/widget?id=1071395189219938354&theme=dark',
         github: 'https://github.com/vim-kr/renewal',

src/components/about-section.astro

@@ -1,21 +1,24 @@
 ---
 /* eslint-disable */
 import GlassMorphicCard from 'components/glass-morphic-card.astro'
-import DiscordLinkButton from './button/discord-link-button.jsx'
 ---
 
 <div class="grid
 	grid-cols-1
-	gap-x-10
+	gap-x-16
 	md:grid-cols-3">
-    <div class="introduction col-span-1 md:col-span-2">
+    <div class="introduction col-span-1 flex flex-col gap-6 md:col-span-2">
         <GlassMorphicCard colorVariant="blue">
-            <Fragment slot="title">Vim에 대한 애정</Fragment>
+            <Fragment slot="title">
+                <i class="fas fa-heart mr-3 text-vim-pink"></i>
+                Vim에 대한 애정
+            </Fragment>
             <p>Vim에 대한 애정이 넘쳐나는 사람들을 위한 따뜻한 커뮤니티</p>
         </GlassMorphicCard>
 
         <GlassMorphicCard colorVariant="red">
             <Fragment slot="title">
+                <i class="fas fa-hands-helping mr-3 text-vim-cyan"></i>
                 언제든지 도움을 요청할 수 있는 커뮤니티
             </Fragment>
             <p>
@@ -25,13 +28,15 @@ import DiscordLinkButton from './button/discord-link-button.jsx'
         </GlassMorphicCard>
 
         <GlassMorphicCard colorVariant="yellow">
-            <Fragment slot="title">다양한 배경의 개발자가 모인 멜팅팟</Fragment>
+            <Fragment slot="title">
+                <i class="fas fa-users mr-3 text-vim-green"></i>
+                다양한 배경의 개발자가 모인 멜팅팟
+            </Fragment>
             <p>
                 vim.kr은 웹/모바일/SRE/이공계 연구원 등 Vim을 사용하는 다양한
                 배경을 가진 사람들이 모인 멜팅팟입니다.
             </p>
         </GlassMorphicCard>
-        <DiscordLinkButton />
     </div>
     <div
         class="vim-logo
@@ -40,12 +45,15 @@ import DiscordLinkButton from './button/discord-link-button.jsx'
 		col-span-1
 		mb-12
 		flex
+		items-center
 		justify-center
 		md:order-last
-		md:justify-end"
+		md:justify-center
+		lg:justify-end"
     >
         <img
-            style="max-width: 20rem; max-height: 20rem; width: 100%; object-fit: contain; filter: drop-shadow(3rem 2rem 1rem #222); margin-bottom: 5rem"
+            class="transition-all duration-500 hover:rotate-3 hover:scale-110"
+            style="max-width: 18rem; max-height: 18rem; width: 100%; object-fit: contain; filter: drop-shadow(2rem 1.5rem 1rem rgba(0,0,0,0.3)); margin-bottom: 3rem"
             src="/vimkr.png"
         />
     </div>

src/components/button/discord-link-button.jsx

@@ -16,15 +16,15 @@ const DiscordLinkButton = () => {
 		items-center
 		rounded-lg
 		border
-		border-gray-300
-		bg-white
+		border-gray-600
+		bg-gray-800
 		px-6
 		py-4
 		text-sm
 		font-medium
-		text-gray-800
+		text-gray-200
 		shadow-md
-		hover:bg-gray-200
+		hover:bg-gray-700
 		focus:outline-none
 		focus:ring-2
 		focus:ring-gray-500
@@ -49,9 +49,7 @@ const DiscordLinkButton = () => {
                         </g>
                     </svg>
 
-                    <span style={{ color: '#5865F2' }}>
-                        디스코드 서버에 참여하기
-                    </span>
+                    <span className="text-white">디스코드 서버에 참여하기</span>
                 </a>
             </div>
         </div>

src/components/discord-cta-section.jsx

@@ -0,0 +1,79 @@
+import React from 'react'
+
+const DiscordCTASection = () => {
+    return (
+        <section className="relative my-24 overflow-hidden">
+            <div className="relative rounded-2xl border border-vim-purple/30 bg-gradient-to-r from-vim-purple/20 to-vim-blue/20 p-12 text-center backdrop-blur-md">
+                <div className="absolute inset-0 animate-pulse bg-gradient-to-r from-vim-purple/10 to-vim-blue/10"></div>
+
+                <div className="relative z-10">
+                    <div className="mb-6 flex justify-center">
+                        <div className="flex h-24 w-24 animate-bounce items-center justify-center rounded-2xl bg-[#5865F2]/20">
+                            <svg
+                                className="h-16 w-16"
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 -28.5 256 256"
+                                preserveAspectRatio="xMidYMid"
+                            >
+                                <path
+                                    d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z"
+                                    fill="#5865F2"
+                                    fillRule="nonzero"
+                                />
+                            </svg>
+                        </div>
+                    </div>
+
+                    <h2
+                        className="mb-4 text-4xl font-bold text-white"
+                        style={{ color: 'white !important' }}
+                    >
+                        vim.kr 디스코드 커뮤니티에 참여하세요!
+                    </h2>
+
+                    <p className="mx-auto mb-8 max-w-2xl text-xl text-gray-300">
+                        Vim을 사랑하는 개발자들이 모여 지식을 공유하고, <br />
+                        서로 도움을 주고받는 따뜻한 커뮤니티입니다.
+                    </p>
+
+                    <div className="mb-8 flex flex-col items-center justify-center gap-6 sm:flex-row">
+                        <div className="flex items-center gap-2 text-gray-300">
+                            <i className="fas fa-users text-vim-green"></i>
+                            <span>활발한 커뮤니티</span>
+                        </div>
+                        <div className="!mt-0 flex items-center gap-2 text-gray-300">
+                            <i className="fas fa-comments text-vim-cyan"></i>
+                            <span>편하게 질문 & 답변</span>
+                        </div>
+                    </div>
+
+                    <a
+                        href="https://discord.gg/FCDhM2cw65"
+                        className="inline-flex transform items-center gap-3 rounded-full bg-[#5865F2] px-8 py-4 font-bold text-white transition-all duration-300 hover:scale-110 hover:bg-[#4752C4] hover:shadow-2xl hover:shadow-[#5865F2]/50"
+                    >
+                        <svg
+                            className="h-6 w-6"
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 -28.5 256 256"
+                            preserveAspectRatio="xMidYMid"
+                        >
+                            <path
+                                d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z"
+                                fill="white"
+                                fillRule="nonzero"
+                            />
+                        </svg>
+                        <span
+                            className="text-lg"
+                            style={{ color: 'white !important' }}
+                        >
+                            디스코드 참여하기
+                        </span>
+                    </a>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export default DiscordCTASection

src/components/glass-morphic-card.astro

@@ -6,21 +6,21 @@ interface Props {
 const { colorVariant = 'green' } = Astro.props
 
 const backgroundColors = {
-    gray: 'bg-gray-100',
-    green: 'bg-green-100',
-    red: 'bg-red-100',
-    blue: 'bg-blue-100',
-    yellow: 'bg-yellow-100',
-    violet: 'bg-violet-100',
+    gray: 'bg-gradient-to-br from-gray-600/30 to-gray-700/20',
+    green: 'bg-gradient-to-br from-vim-green/30 to-vim-green/10',
+    red: 'bg-gradient-to-br from-vim-pink/30 to-vim-pink/10',
+    blue: 'bg-gradient-to-br from-vim-blue/30 to-vim-blue/10',
+    yellow: 'bg-gradient-to-br from-vim-yellow/30 to-vim-yellow/10',
+    violet: 'bg-gradient-to-br from-vim-purple/30 to-vim-purple/10',
 }
 
 const borderColors = {
-    gray: 'border-gray-300',
-    green: 'border-green-300',
-    red: 'border-red-300',
-    blue: 'border-blue-300',
-    yellow: 'border-yellow-300',
-    violet: 'border-violet-300',
+    gray: 'border-gray-400/50',
+    green: 'border-vim-green/50',
+    red: 'border-vim-pink/50',
+    blue: 'border-vim-blue/50',
+    yellow: 'border-vim-yellow/50',
+    violet: 'border-vim-purple/50',
 }
 
 const backgroundColor = backgroundColors[colorVariant]
@@ -34,29 +34,52 @@ const borderColor = borderColors[colorVariant]
   ${backgroundColor}
   ${borderColor} 
   rounded-2xl
-  border-4
-  border-opacity-40
-  bg-opacity-30 
+  border-2
+  backdrop-blur-xl
   bg-clip-padding 
-  px-6 
-  py-10
-  backdrop-blur-md
-  backdrop-filter
-  shadow-md
-  shadow-black
+  px-8 
+  py-8
+  shadow-xl
+  hover:shadow-2xl
+  hover:scale-[1.02]
+  transition-all
+  duration-300
+  relative
+  overflow-hidden
+  group
+  before:absolute
+  before:inset-0
+  before:bg-gradient-to-r
+  before:from-transparent
+  before:via-white/10
+  before:to-transparent
+  before:-translate-x-full
+  before:group-hover:translate-x-full
+  before:transition-transform
+  before:duration-700
 `}
 >
-    <h2
-        style="word-break: keep-all;"
-        class="dark:dark-text-stroke font-extrabold !leading-relaxed dark:text-white"
+    <div
+        class="absolute inset-0 bg-gradient-to-br from-white/10 via-white/5 to-transparent opacity-50"
     >
-        <slot name="icon" />
-        <slot name="title" />
-    </h2>
+    </div>
     <div
-        style="word-break: keep-all;"
-        class="text-2xl leading-10 !text-slate-800 !dark:text-slate-400 "
+        class="absolute -right-20 -top-20 h-40 w-40 rounded-full bg-gradient-to-br from-white/20 to-transparent blur-3xl transition-transform duration-500 group-hover:scale-150"
     >
-        <slot />
+    </div>
+    <div class="relative z-10">
+        <h2
+            style="word-break: keep-all; color: white !important;"
+            class="mb-4 whitespace-normal text-2xl font-extrabold !leading-loose tracking-wide text-white md:text-3xl"
+        >
+            <slot name="icon" />
+            <slot name="title" />
+        </h2>
+        <div
+            style="word-break: keep-all; color: #e5e7eb !important;"
+            class="text-lg leading-relaxed tracking-normal !text-gray-200 md:text-xl"
+        >
+            <slot />
+        </div>
     </div>
 </div>

src/components/glass-morphic-marquee/marquee-category-label.astro

@@ -2,6 +2,6 @@
 
 ---
 
-<div class="mx-10 !mt-0 text-2xl font-extrabold">
+<div class="mx-10 !mt-0 text-2xl font-extrabold text-gray-200">
     <slot />
 </div>

src/components/marquee/marquee-list.jsx

@@ -1,21 +1,41 @@
 import React from 'react'
 
 const Marquee = ({ images }) => {
+    // Filter out empty images and duplicate for seamless infinite scroll
+    const validImages = images.filter((img) => img)
+    const duplicatedImages = [...validImages, ...validImages]
+
     return (
-        <div
-            className="
-      relative
-      w-[min(600px,100%)]
-      overflow-hidden
-      "
-        >
-            <div className="flex animate-marquee">
-                {images.map((image, index) => (
-                    <div key={index} className="!mt-0 mr-[10px] flex-none">
+        <div className="relative w-full overflow-hidden">
+            <style jsx>{`
+                @keyframes scroll {
+                    0% {
+                        transform: translateX(0);
+                    }
+                    100% {
+                        transform: translateX(-50%);
+                    }
+                }
+
+                .marquee-content {
+                    display: flex;
+                    animation: scroll 30s linear infinite;
+                }
+
+                .marquee-content:hover {
+                    animation-play-state: paused;
+                }
+            `}</style>
+            <div className="marquee-content">
+                {duplicatedImages.map((image, index) => (
+                    <div
+                        key={index}
+                        className="mr-4 h-[180px] w-[240px] flex-none overflow-hidden rounded-lg shadow-lg transition-transform duration-300 hover:scale-105"
+                    >
                         <img
                             src={image}
                             alt=""
-                            className="!h-[150px] !w-[200px] object-cover"
+                            className="h-full w-full object-cover"
                         />
                     </div>
                 ))}

src/components/reading-materials-section.astro

@@ -4,7 +4,7 @@ import readingMaterialsJSON from '../data/reading-materials.json'
 
 <!-- external link에 대한 모음 -->
 <section class="mb-32">
-    <h2 class="mb-[50px] border-b-black">
+    <h2 class="mb-[50px] border-b-gray-600">
         <i class="fa-solid fa-book-open"></i>
         <span class="ml-[10px]">Reading Materials</span>
     </h2>

src/components/usecase-section/usecase-label.jsx

@@ -1,11 +1,11 @@
 const UsecaseLabel = ({ isActive = false, children }) => {
     return (
         <div
-            className={`!m-0 cursor-pointer select-none rounded-2xl px-[20px] py-10 text-4xl font-extrabold text-gray-600 md:px-[40px]
+            className={`!m-0 cursor-pointer select-none rounded-2xl px-[20px] py-10 text-4xl font-extrabold md:px-[40px]
 			  ${
                   isActive
-                      ? 'border-4 border-gray-500 !text-blue-500 dark:!text-white'
-                      : 'hidden border-2 border-gray-300 hover:border-opacity-40 hover:bg-gray-100 hover:bg-opacity-30 hover:bg-clip-padding hover:text-blue-300 hover:backdrop-blur-md hover:backdrop-filter md:block dark:hover:text-white'
+                      ? 'border-4 border-vim-blue !text-vim-cyan'
+                      : 'hidden border-2 border-gray-600 text-gray-300 hover:border-opacity-60 hover:bg-vim-dark-secondary hover:bg-opacity-50 hover:bg-clip-padding hover:text-vim-blue hover:backdrop-blur-md hover:backdrop-filter md:block'
               }`}
         >
             {children}

src/components/usecase-section/usecase-rounded-label.jsx

@@ -1,8 +1,8 @@
 const UsecaseRoundedLabel = ({ isActive = false, children }) => {
     return (
         <div
-            className={`!md:none !m-0 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-gray-300 text-2xl font-extrabold text-gray-400 hover:bg-white hover:text-black ${
-                isActive ? 'bg-white !text-black' : ''
+            className={`!md:none !m-0 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-gray-700 text-2xl font-extrabold text-gray-200 hover:bg-gray-600 hover:text-white ${
+                isActive ? 'bg-gray-600 !text-white' : ''
             }`}
         >
             {children}