Skip to content

Commit 2b02b1e

Browse files
whats2000whats2000
authored
Merge pull request #23 from mc-cloud-town/feat/adjust-style
Feat: Make style enhancements across the application
2 parents b14c894 + 3a020f8 commit 2b02b1e

10 files changed

Lines changed: 497 additions & 77 deletions

File tree

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,5 +65,6 @@
6565
"vite-plugin-compression": "^0.5.1",
6666
"vite-plugin-image-optimizer": "^1.1.7",
6767
"vite-react-ssg": "^0.8.9"
68-
}
68+
},
69+
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
6970
}

‎src/Layout.tsx‎

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,47 @@ export const Layout = () => {
99
<ConfigProvider
1010
theme={{
1111
token: {
12-
colorPrimary: '#6f9b9c',
13-
colorInfo: '#96dbe6',
14-
colorSuccess: '#b1dde6',
15-
colorWarning: '#fadb14',
16-
colorError: '#f5222d',
12+
// Primary colors - richer, more vibrant
13+
colorPrimary: '#4a8b8d',
14+
colorInfo: '#5bb8c9',
15+
colorSuccess: '#52c4a0',
16+
colorWarning: '#f5a623',
17+
colorError: '#e74c3c',
1718

18-
// Alias Token
19+
// Background and text
1920
colorBgContainer: '#ffffff',
20-
colorTextBase: '#333333',
21-
borderRadius: 8,
21+
colorTextBase: '#2c3e50',
22+
borderRadius: 12,
2223

23-
colorLink: '#6f9b9c',
24-
colorBorder: '#96dbe6',
24+
// Links and borders
25+
colorLink: '#4a8b8d',
26+
colorLinkHover: '#6bb5b7',
27+
colorBorder: 'rgba(111, 155, 156, 0.3)',
28+
29+
// Enhanced shadows
30+
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
31+
boxShadowSecondary: '0 8px 24px rgba(0, 0, 0, 0.12)',
2532
},
2633
components: {
34+
Button: {
35+
primaryShadow: '0 4px 16px rgba(74, 139, 141, 0.4)',
36+
borderRadius: 8,
37+
},
38+
Card: {
39+
borderRadiusLG: 16,
40+
boxShadowTertiary: '0 8px 32px rgba(0, 0, 0, 0.08)',
41+
},
2742
Timeline: {
28-
dotBg: '#6f9b9c',
43+
dotBg: '#4a8b8d',
2944
dotBorderWidth: 2,
3045
itemPaddingBottom: 20,
3146
tailColor: 'rgba(255, 255, 255, 0.2)',
3247
tailWidth: 2,
3348
},
49+
Menu: {
50+
darkItemBg: 'transparent',
51+
darkSubMenuItemBg: 'rgba(0, 0, 0, 0.2)',
52+
},
3453
},
3554
}}
3655
>

‎src/components/collection/CollectionPageBase.tsx‎

Lines changed: 111 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,129 @@ import useApi from '@/hooks/useApi.ts';
1616
import { StatusShowingGroup } from '#/common/StatusShowingGroup.tsx';
1717

1818
const Container = styled.div<{ $token: GlobalToken }>`
19-
padding: 50px 40px;
19+
position: relative;
20+
overflow: hidden;
21+
padding: 60px 40px;
2022
color: #fff;
21-
background-color: ${(props) => props.$token.colorPrimary};
23+
24+
/* Rich layered gradient background */
25+
background: radial-gradient(
26+
ellipse at 15% 85%,
27+
rgba(74, 139, 141, 0.4) 0%,
28+
transparent 50%
29+
),
30+
radial-gradient(
31+
ellipse at 85% 15%,
32+
rgba(150, 219, 230, 0.25) 0%,
33+
transparent 50%
34+
),
35+
linear-gradient(
36+
135deg,
37+
${(props) => props.$token.colorPrimary} 0%,
38+
#5a9b9c 25%,
39+
#4a8b8d 50%,
40+
#5a9b9c 75%,
41+
${(props) => props.$token.colorPrimary} 100%
42+
);
43+
44+
/* Glassmorphism inner glow */
45+
box-shadow:
46+
inset 0 1px 0 rgba(255, 255, 255, 0.15),
47+
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
48+
49+
/* Decorative geometric accent */
50+
&::before {
51+
content: '';
52+
position: absolute;
53+
top: -100px;
54+
left: -100px;
55+
width: 400px;
56+
height: 400px;
57+
background: radial-gradient(
58+
circle,
59+
rgba(150, 219, 230, 0.15) 0%,
60+
transparent 60%
61+
);
62+
pointer-events: none;
63+
}
64+
65+
&::after {
66+
content: '';
67+
position: absolute;
68+
bottom: -150px;
69+
right: -150px;
70+
width: 500px;
71+
height: 500px;
72+
background: radial-gradient(
73+
circle,
74+
rgba(255, 255, 255, 0.08) 0%,
75+
transparent 60%
76+
);
77+
pointer-events: none;
78+
}
2279
2380
@media (max-width: 400px) {
24-
padding: 50px 10px;
81+
padding: 50px 15px;
2582
}
2683
`;
2784

2885
const SelectWrapper = styled.div`
2986
display: flex;
3087
justify-content: center;
88+
margin-bottom: 40px;
89+
position: relative;
90+
z-index: 1;
3191
`;
3292

3393
const StyledSelect = styled(Select)<SelectProps>`
34-
max-width: 400px;
94+
max-width: 500px;
3595
width: 100%;
96+
97+
/* Glassmorphism styling for the select */
98+
.ant-select-selector {
99+
background: rgba(255, 255, 255, 0.15) !important;
100+
backdrop-filter: blur(10px);
101+
-webkit-backdrop-filter: blur(10px);
102+
border: 1px solid rgba(255, 255, 255, 0.3) !important;
103+
border-radius: 12px !important;
104+
padding: 8px 16px !important;
105+
height: auto !important;
106+
min-height: 48px !important;
107+
box-shadow:
108+
0 8px 32px rgba(0, 0, 0, 0.1),
109+
inset 0 1px 0 rgba(255, 255, 255, 0.2);
110+
transition: all 0.3s ease !important;
111+
}
112+
113+
.ant-select-selector:hover {
114+
border-color: rgba(255, 255, 255, 0.5) !important;
115+
box-shadow:
116+
0 12px 40px rgba(0, 0, 0, 0.15),
117+
inset 0 1px 0 rgba(255, 255, 255, 0.3);
118+
}
119+
120+
.ant-select-selection-placeholder {
121+
color: rgba(255, 255, 255, 0.7) !important;
122+
}
123+
124+
.ant-select-selection-item {
125+
background: rgba(255, 255, 255, 0.2) !important;
126+
border: 1px solid rgba(255, 255, 255, 0.3) !important;
127+
border-radius: 6px !important;
128+
color: #fff !important;
129+
}
130+
131+
.ant-select-selection-item-remove {
132+
color: rgba(255, 255, 255, 0.8) !important;
133+
}
134+
135+
&.ant-select-focused .ant-select-selector {
136+
border-color: rgba(255, 255, 255, 0.6) !important;
137+
box-shadow:
138+
0 12px 40px rgba(0, 0, 0, 0.15),
139+
0 0 0 2px rgba(150, 219, 230, 0.2),
140+
inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
141+
}
36142
`;
37143

38144
const CollectionPageBase = ({
@@ -159,7 +265,7 @@ const CollectionPageBase = ({
159265
</SelectWrapper>
160266
<CardsSection
161267
title={t(`${pageType}Collection.title`)}
162-
type={'primary'}
268+
type={'transparent'}
163269
imageContentSections={bindEventImageContents}
164270
useStaticDataApi={true}
165271
/>

‎src/components/common/CardsSection.tsx‎

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,30 @@ import { fadeIn } from '@/styles/animation.ts';
1111
import { STATIC_DATA_API } from '@/constants';
1212

1313
const Section = styled.section<{
14-
$type: 'default' | 'dark' | 'primary';
14+
$type: 'default' | 'dark' | 'primary' | 'transparent';
1515
$token: GlobalToken;
1616
}>`
17-
background-color: ${(props) =>
18-
props.$type === 'dark'
19-
? props.$token.colorPrimaryBg
20-
: props.$type === 'primary'
21-
? props.$token.colorPrimary
22-
: props.$token.colorBgBase};
23-
24-
padding: 50px 20px;
17+
background: ${(props) =>
18+
props.$type === 'transparent'
19+
? 'transparent'
20+
: props.$type === 'dark'
21+
? `linear-gradient(135deg, ${props.$token.colorPrimaryBg} 0%, #4a7c7d 50%, ${props.$token.colorPrimaryBg} 100%)`
22+
: props.$type === 'primary'
23+
? `linear-gradient(135deg, ${props.$token.colorPrimary} 0%, #5a9b9c 50%, ${props.$token.colorPrimary} 100%)`
24+
: `linear-gradient(180deg, ${props.$token.colorBgBase} 0%, #f0f4f5 50%, ${props.$token.colorBgBase} 100%)`};
25+
26+
/* Set text color for dark/primary/transparent modes */
27+
color: ${(props) =>
28+
props.$type === 'dark' ||
29+
props.$type === 'primary' ||
30+
props.$type === 'transparent'
31+
? '#fff'
32+
: 'inherit'};
33+
34+
padding: ${(props) =>
35+
props.$type === 'transparent' ? '20px 0' : '50px 20px'};
36+
position: relative;
37+
z-index: 1;
2538
`;
2639

2740
const CardContainer = styled.div`
@@ -134,7 +147,7 @@ const StyledButton = styled(Button)`
134147

135148
interface CardsSectionProps {
136149
title: string;
137-
type?: 'default' | 'dark' | 'primary';
150+
type?: 'default' | 'dark' | 'primary' | 'transparent';
138151
imageContentSections: IImageContent[];
139152
useStaticDataApi?: boolean;
140153
}

‎src/components/common/CarouselSection.tsx‎

Lines changed: 33 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,25 @@ import styled, { css } from 'styled-components';
66
import useAnimateOnScroll from '@/hooks/useAnimateOnScroll.ts';
77
import { IImageContent } from '@/types/IImageContent.ts';
88
import getImageUrl from '@/utils/getImageUrl.ts';
9-
import { fadeIn } from '@/styles/animation.ts';
9+
import { slideUpSpring, fadeIn } from '@/styles/animation.ts';
1010
import { STATIC_DATA_API } from '@/constants';
1111

1212
const Section = styled.section`
1313
background-color: #ecf0f1;
14-
padding: 50px 20px;
14+
padding: 80px 40px;
1515
1616
@media (max-width: 400px) {
17-
padding: 50px 5px;
17+
padding: 60px 20px;
1818
}
1919
`;
2020

2121
const SectionTitle = styled.h2<{ $fadeIn: boolean }>`
2222
text-align: center;
2323
color: inherit;
24-
margin-bottom: 40px;
24+
margin-bottom: 50px;
2525
font-weight: bolder;
2626
opacity: 0;
27+
font-size: 2rem;
2728
2829
${(props) =>
2930
props.$fadeIn &&
@@ -38,6 +39,8 @@ const SectionSubtitle = styled.h3<{ $fadeIn: boolean }>`
3839
margin-top: 20px;
3940
opacity: 0;
4041
border-radius: 10px;
42+
color: #2c3e50;
43+
font-size: 1.1rem;
4144
4245
${(props) =>
4346
props.$fadeIn &&
@@ -50,39 +53,47 @@ const CarouselContainer = styled.div`
5053
display: flex;
5154
flex-wrap: wrap;
5255
justify-content: center;
53-
gap: 20px;
56+
gap: 30px;
5457
padding: 20px 0;
5558
`;
5659

57-
const CarouselWrapper = styled.div`
60+
const CarouselWrapper = styled.div<{ $index?: number }>`
5861
flex: 1;
5962
max-width: 30%;
63+
opacity: 0;
64+
animation: ${slideUpSpring} 0.6s ease-out forwards;
65+
animation-delay: ${(props) => (props.$index || 0) * 0.15}s;
6066
6167
@media (max-width: 1024px) {
6268
margin-bottom: 40px;
69+
max-width: 45%;
6370
}
6471
6572
&:last-child {
6673
margin-bottom: 0;
6774
}
6875
69-
@media (max-width: 1024px) {
70-
max-width: 45%;
71-
}
72-
7376
@media (max-width: 768px) {
7477
max-width: 85%;
7578
}
7679
`;
7780

7881
const StyledCarousel = styled(Carousel)<{ $fadeIn: boolean }>`
79-
opacity: 0;
82+
border-radius: 16px;
83+
overflow: hidden;
84+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
85+
transition:
86+
transform 0.4s ease,
87+
box-shadow 0.4s ease;
88+
89+
&:hover {
90+
transform: translateY(-5px);
91+
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
92+
}
8093
81-
${(props) =>
82-
props.$fadeIn &&
83-
css`
84-
animation: ${fadeIn} 0.8s ease-out forwards;
85-
`};
94+
.slick-dots li button {
95+
background: #4a8b8d !important;
96+
}
8697
`;
8798

8899
const ImageWrapper = styled.div`
@@ -103,9 +114,13 @@ const ImageWrapper = styled.div`
103114
width: 100%;
104115
height: 100%;
105116
object-fit: cover;
106-
border-radius: 10px;
117+
transition: transform 0.5s ease-out;
107118
}
108119
}
120+
121+
&:hover > span > img {
122+
transform: scale(1.08);
123+
}
109124
`;
110125

111126
interface CarouselSectionProps {
@@ -136,7 +151,7 @@ const CarouselSection: React.FC<CarouselSectionProps> = ({
136151
<SectionTitle $fadeIn={animate}>{title}</SectionTitle>
137152
<CarouselContainer>
138153
{imageContentsSections.map((imageContentSections, index) => (
139-
<CarouselWrapper key={index}>
154+
<CarouselWrapper key={index} $index={index}>
140155
<StyledCarousel
141156
key={index}
142157
autoplaySpeed={5000}

0 commit comments

Comments
 (0)