Skip to content

Commit 9e1e688

Browse files
malkoGmalkoG
authored
Merge pull request #54 from vim-kr/feat/update-styles
feat: 2025 디자인 개편
2 parents 643b259 + 216d825 commit 9e1e688

17 files changed

Lines changed: 495 additions & 140 deletions

‎astro.config.mjs‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,14 @@ import react from '@astrojs/react'
66

77
// https://astro.build/config
88
export default defineConfig({
9-
site: 'https://next.vim.kr',
9+
site: 'https://vim.kr',
1010
integrations: [
1111
starlight({
1212
favicon: '/favicon.ico',
1313
title: 'vim.kr',
14+
customCss: [
15+
'./src/styles/global.css',
16+
],
1417
social: {
1518
discord: 'https://discord.com/widget?id=1071395189219938354&theme=dark',
1619
github: 'https://github.com/vim-kr/renewal',

‎src/components/about-section.astro‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
11
---
22
/* eslint-disable */
33
import GlassMorphicCard from 'components/glass-morphic-card.astro'
4-
import DiscordLinkButton from './button/discord-link-button.jsx'
54
---
65

76
<div class="grid
87
grid-cols-1
9-
gap-x-10
8+
gap-x-16
109
md:grid-cols-3">
11-
<div class="introduction col-span-1 md:col-span-2">
10+
<div class="introduction col-span-1 flex flex-col gap-6 md:col-span-2">
1211
<GlassMorphicCard colorVariant="blue">
13-
<Fragment slot="title">Vim에 대한 애정</Fragment>
12+
<Fragment slot="title">
13+
<i class="fas fa-heart mr-3 text-vim-pink"></i>
14+
Vim에 대한 애정
15+
</Fragment>
1416
<p>Vim에 대한 애정이 넘쳐나는 사람들을 위한 따뜻한 커뮤니티</p>
1517
</GlassMorphicCard>
1618

1719
<GlassMorphicCard colorVariant="red">
1820
<Fragment slot="title">
21+
<i class="fas fa-hands-helping mr-3 text-vim-cyan"></i>
1922
언제든지 도움을 요청할 수 있는 커뮤니티
2023
</Fragment>
2124
<p>
@@ -25,13 +28,15 @@ import DiscordLinkButton from './button/discord-link-button.jsx'
2528
</GlassMorphicCard>
2629

2730
<GlassMorphicCard colorVariant="yellow">
28-
<Fragment slot="title">다양한 배경의 개발자가 모인 멜팅팟</Fragment>
31+
<Fragment slot="title">
32+
<i class="fas fa-users mr-3 text-vim-green"></i>
33+
다양한 배경의 개발자가 모인 멜팅팟
34+
</Fragment>
2935
<p>
3036
vim.kr은 웹/모바일/SRE/이공계 연구원 등 Vim을 사용하는 다양한
3137
배경을 가진 사람들이 모인 멜팅팟입니다.
3238
</p>
3339
</GlassMorphicCard>
34-
<DiscordLinkButton />
3540
</div>
3641
<div
3742
class="vim-logo
@@ -40,12 +45,15 @@ import DiscordLinkButton from './button/discord-link-button.jsx'
4045
col-span-1
4146
mb-12
4247
flex
48+
items-center
4349
justify-center
4450
md:order-last
45-
md:justify-end"
51+
md:justify-center
52+
lg:justify-end"
4653
>
4754
<img
48-
style="max-width: 20rem; max-height: 20rem; width: 100%; object-fit: contain; filter: drop-shadow(3rem 2rem 1rem #222); margin-bottom: 5rem"
55+
class="transition-all duration-500 hover:rotate-3 hover:scale-110"
56+
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"
4957
src="/vimkr.png"
5058
/>
5159
</div>

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,15 @@ const DiscordLinkButton = () => {
1616
items-center
1717
rounded-lg
1818
border
19-
border-gray-300
20-
bg-white
19+
border-gray-600
20+
bg-gray-800
2121
px-6
2222
py-4
2323
text-sm
2424
font-medium
25-
text-gray-800
25+
text-gray-200
2626
shadow-md
27-
hover:bg-gray-200
27+
hover:bg-gray-700
2828
focus:outline-none
2929
focus:ring-2
3030
focus:ring-gray-500
@@ -49,9 +49,7 @@ const DiscordLinkButton = () => {
4949
</g>
5050
</svg>
5151

52-
<span style={{ color: '#5865F2' }}>
53-
디스코드 서버에 참여하기
54-
</span>
52+
<span className="text-white">디스코드 서버에 참여하기</span>
5553
</a>
5654
</div>
5755
</div>

‎src/components/discord-cta-section.jsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import React from 'react'
2+
3+
const DiscordCTASection = () => {
4+
return (
5+
<section className="relative my-24 overflow-hidden">
6+
<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">
7+
<div className="absolute inset-0 animate-pulse bg-gradient-to-r from-vim-purple/10 to-vim-blue/10"></div>
8+
9+
<div className="relative z-10">
10+
<div className="mb-6 flex justify-center">
11+
<div className="flex h-24 w-24 animate-bounce items-center justify-center rounded-2xl bg-[#5865F2]/20">
12+
<svg
13+
className="h-16 w-16"
14+
xmlns="http://www.w3.org/2000/svg"
15+
viewBox="0 -28.5 256 256"
16+
preserveAspectRatio="xMidYMid"
17+
>
18+
<path
19+
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"
20+
fill="#5865F2"
21+
fillRule="nonzero"
22+
/>
23+
</svg>
24+
</div>
25+
</div>
26+
27+
<h2
28+
className="mb-4 text-4xl font-bold text-white"
29+
style={{ color: 'white !important' }}
30+
>
31+
vim.kr 디스코드 커뮤니티에 참여하세요!
32+
</h2>
33+
34+
<p className="mx-auto mb-8 max-w-2xl text-xl text-gray-300">
35+
Vim을 사랑하는 개발자들이 모여 지식을 공유하고, <br />
36+
서로 도움을 주고받는 따뜻한 커뮤니티입니다.
37+
</p>
38+
39+
<div className="mb-8 flex flex-col items-center justify-center gap-6 sm:flex-row">
40+
<div className="flex items-center gap-2 text-gray-300">
41+
<i className="fas fa-users text-vim-green"></i>
42+
<span>활발한 커뮤니티</span>
43+
</div>
44+
<div className="!mt-0 flex items-center gap-2 text-gray-300">
45+
<i className="fas fa-comments text-vim-cyan"></i>
46+
<span>편하게 질문 & 답변</span>
47+
</div>
48+
</div>
49+
50+
<a
51+
href="https://discord.gg/FCDhM2cw65"
52+
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"
53+
>
54+
<svg
55+
className="h-6 w-6"
56+
xmlns="http://www.w3.org/2000/svg"
57+
viewBox="0 -28.5 256 256"
58+
preserveAspectRatio="xMidYMid"
59+
>
60+
<path
61+
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"
62+
fill="white"
63+
fillRule="nonzero"
64+
/>
65+
</svg>
66+
<span
67+
className="text-lg"
68+
style={{ color: 'white !important' }}
69+
>
70+
디스코드 참여하기
71+
</span>
72+
</a>
73+
</div>
74+
</div>
75+
</section>
76+
)
77+
}
78+
79+
export default DiscordCTASection

‎src/components/glass-morphic-card.astro‎

Lines changed: 53 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,21 @@ interface Props {
66
const { colorVariant = 'green' } = Astro.props
77
88
const backgroundColors = {
9-
gray: 'bg-gray-100',
10-
green: 'bg-green-100',
11-
red: 'bg-red-100',
12-
blue: 'bg-blue-100',
13-
yellow: 'bg-yellow-100',
14-
violet: 'bg-violet-100',
9+
gray: 'bg-gradient-to-br from-gray-600/30 to-gray-700/20',
10+
green: 'bg-gradient-to-br from-vim-green/30 to-vim-green/10',
11+
red: 'bg-gradient-to-br from-vim-pink/30 to-vim-pink/10',
12+
blue: 'bg-gradient-to-br from-vim-blue/30 to-vim-blue/10',
13+
yellow: 'bg-gradient-to-br from-vim-yellow/30 to-vim-yellow/10',
14+
violet: 'bg-gradient-to-br from-vim-purple/30 to-vim-purple/10',
1515
}
1616
1717
const borderColors = {
18-
gray: 'border-gray-300',
19-
green: 'border-green-300',
20-
red: 'border-red-300',
21-
blue: 'border-blue-300',
22-
yellow: 'border-yellow-300',
23-
violet: 'border-violet-300',
18+
gray: 'border-gray-400/50',
19+
green: 'border-vim-green/50',
20+
red: 'border-vim-pink/50',
21+
blue: 'border-vim-blue/50',
22+
yellow: 'border-vim-yellow/50',
23+
violet: 'border-vim-purple/50',
2424
}
2525
2626
const backgroundColor = backgroundColors[colorVariant]
@@ -34,29 +34,52 @@ const borderColor = borderColors[colorVariant]
3434
${backgroundColor}
3535
${borderColor}
3636
rounded-2xl
37-
border-4
38-
border-opacity-40
39-
bg-opacity-30
37+
border-2
38+
backdrop-blur-xl
4039
bg-clip-padding
41-
px-6
42-
py-10
43-
backdrop-blur-md
44-
backdrop-filter
45-
shadow-md
46-
shadow-black
40+
px-8
41+
py-8
42+
shadow-xl
43+
hover:shadow-2xl
44+
hover:scale-[1.02]
45+
transition-all
46+
duration-300
47+
relative
48+
overflow-hidden
49+
group
50+
before:absolute
51+
before:inset-0
52+
before:bg-gradient-to-r
53+
before:from-transparent
54+
before:via-white/10
55+
before:to-transparent
56+
before:-translate-x-full
57+
before:group-hover:translate-x-full
58+
before:transition-transform
59+
before:duration-700
4760
`}
4861
>
49-
<h2
50-
style="word-break: keep-all;"
51-
class="dark:dark-text-stroke font-extrabold !leading-relaxed dark:text-white"
62+
<div
63+
class="absolute inset-0 bg-gradient-to-br from-white/10 via-white/5 to-transparent opacity-50"
5264
>
53-
<slot name="icon" />
54-
<slot name="title" />
55-
</h2>
65+
</div>
5666
<div
57-
style="word-break: keep-all;"
58-
class="text-2xl leading-10 !text-slate-800 !dark:text-slate-400 "
67+
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"
5968
>
60-
<slot />
69+
</div>
70+
<div class="relative z-10">
71+
<h2
72+
style="word-break: keep-all; color: white !important;"
73+
class="mb-4 whitespace-normal text-2xl font-extrabold !leading-loose tracking-wide text-white md:text-3xl"
74+
>
75+
<slot name="icon" />
76+
<slot name="title" />
77+
</h2>
78+
<div
79+
style="word-break: keep-all; color: #e5e7eb !important;"
80+
class="text-lg leading-relaxed tracking-normal !text-gray-200 md:text-xl"
81+
>
82+
<slot />
83+
</div>
6184
</div>
6285
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
33
---
44

5-
<div class="mx-10 !mt-0 text-2xl font-extrabold">
5+
<div class="mx-10 !mt-0 text-2xl font-extrabold text-gray-200">
66
<slot />
77
</div>

‎src/components/marquee/marquee-list.jsx‎

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,41 @@
11
import React from 'react'
22

33
const Marquee = ({ images }) => {
4+
// Filter out empty images and duplicate for seamless infinite scroll
5+
const validImages = images.filter((img) => img)
6+
const duplicatedImages = [...validImages, ...validImages]
7+
48
return (
5-
<div
6-
className="
7-
relative
8-
w-[min(600px,100%)]
9-
overflow-hidden
10-
"
11-
>
12-
<div className="flex animate-marquee">
13-
{images.map((image, index) => (
14-
<div key={index} className="!mt-0 mr-[10px] flex-none">
9+
<div className="relative w-full overflow-hidden">
10+
<style jsx>{`
11+
@keyframes scroll {
12+
0% {
13+
transform: translateX(0);
14+
}
15+
100% {
16+
transform: translateX(-50%);
17+
}
18+
}
19+
20+
.marquee-content {
21+
display: flex;
22+
animation: scroll 30s linear infinite;
23+
}
24+
25+
.marquee-content:hover {
26+
animation-play-state: paused;
27+
}
28+
`}</style>
29+
<div className="marquee-content">
30+
{duplicatedImages.map((image, index) => (
31+
<div
32+
key={index}
33+
className="mr-4 h-[180px] w-[240px] flex-none overflow-hidden rounded-lg shadow-lg transition-transform duration-300 hover:scale-105"
34+
>
1535
<img
1636
src={image}
1737
alt=""
18-
className="!h-[150px] !w-[200px] object-cover"
38+
className="h-full w-full object-cover"
1939
/>
2040
</div>
2141
))}

‎src/components/reading-materials-section.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import readingMaterialsJSON from '../data/reading-materials.json'
44

55
<!-- external link에 대한 모음 -->
66
<section class="mb-32">
7-
<h2 class="mb-[50px] border-b-black">
7+
<h2 class="mb-[50px] border-b-gray-600">
88
<i class="fa-solid fa-book-open"></i>
99
<span class="ml-[10px]">Reading Materials</span>
1010
</h2>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
const UsecaseLabel = ({ isActive = false, children }) => {
22
return (
33
<div
4-
className={`!m-0 cursor-pointer select-none rounded-2xl px-[20px] py-10 text-4xl font-extrabold text-gray-600 md:px-[40px]
4+
className={`!m-0 cursor-pointer select-none rounded-2xl px-[20px] py-10 text-4xl font-extrabold md:px-[40px]
55
${
66
isActive
7-
? 'border-4 border-gray-500 !text-blue-500 dark:!text-white'
8-
: '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'
7+
? 'border-4 border-vim-blue !text-vim-cyan'
8+
: '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'
99
}`}
1010
>
1111
{children}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
const UsecaseRoundedLabel = ({ isActive = false, children }) => {
22
return (
33
<div
4-
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 ${
5-
isActive ? 'bg-white !text-black' : ''
4+
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 ${
5+
isActive ? 'bg-gray-600 !text-white' : ''
66
}`}
77
>
88
{children}

0 commit comments

Comments
 (0)