Skip to content

Commit 48d4d88

Browse files
denisdobra10denisdobra10
authored
[Refactoring] Code refactoring + general UI updated (#703)
* Refactor template page to use dynamic TemplateCard components and simplify layout; remove redundant code and update Tailwind CSS configuration * feat: add TerminalWindow component and enhance UI consistency across pages - Introduced a new TerminalWindow component for displaying terminal-like UI with copy functionality. - Updated WebsiteFooter and WebsiteNavbar components for improved styling and accessibility. - Enhanced the styling of various pages (case studies, community, docs, playground) to ensure better readability and visual consistency. - Improved button and text colors for better contrast and user experience. - Refactored layout structure in the main index page to utilize NuxtLayout for better organization. * UI refactoring: Light mode support and style improvements - Added comprehensive light mode support across all website pages - Refactored HeroSection to use inline Tailwind classes - Fixed TerminalWindow component with full-height content area - Updated FeaturesSection terminal cards for consistent dark theme - Fixed text visibility issues in hero section for light mode - Updated all page components (Templates, Playground, Case Studies, Community) - Improved glass theme styling for better light/dark mode contrast * refactor: simplify HeroButton component and remove redundant link logic; update glass card hover styles * refactor: adjust padding in HeroSection for improved layout consistency * refactor: optimize background styles for GPU performance * refactor: update text color for improved readability in CtaSection
1 parent fcc5187 commit 48d4d88

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+2678
-2897
lines changed

‎docs-v3/.data/content/contents.sqlite‎

0 Bytes
Binary file not shown.

‎docs-v3/assets/css/background.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/* ============================================
2+
App Background Styles
3+
Global background for dark/light modes
4+
============================================ */
5+
6+
.app-layout {
7+
@apply min-h-screen relative;
8+
@apply bg-white;
9+
}
10+
11+
.dark .app-layout {
12+
@apply bg-gradient-to-b from-slate-950 via-gray-900 to-slate-950;
13+
/* GPU optimization: use transform instead of background-attachment: fixed */
14+
}
15+
16+
.app-background {
17+
@apply fixed inset-0 hidden pointer-events-none;
18+
/* GPU optimization: promote to own layer */
19+
will-change: transform;
20+
transform: translateZ(0);
21+
contain: strict;
22+
}
23+
24+
.dark .app-background {
25+
@apply block;
26+
}
27+
28+
.app-gradient-radial {
29+
@apply absolute inset-0;
30+
background: radial-gradient(circle at 50% 50%, rgba(120, 119, 198, 0.15), transparent 50%);
31+
}
32+
33+
.app-grid-pattern {
34+
@apply absolute inset-0;
35+
background-image:
36+
linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
37+
linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
38+
background-size: 100px 100px;
39+
}
40+
41+
/* Website section backgrounds */
42+
.section-dark {
43+
@apply bg-slate-950;
44+
}
45+
46+
.section-dark-subtle {
47+
@apply bg-gray-900/50;
48+
}

‎docs-v3/assets/css/base.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
2+
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
3+
4+
html {
5+
scroll-behavior: smooth;
6+
}
7+
8+
/* Global cursor-pointer for all clickable elements */
9+
button,
10+
[role="button"],
11+
a,
12+
.cursor-pointer,
13+
input[type="submit"],
14+
input[type="button"],
15+
input[type="reset"],
16+
select {
17+
cursor: pointer;
18+
}
19+
20+
/* Fade transition */
21+
.fade-enter-active,
22+
.fade-leave-active {
23+
transition: opacity 0.2s ease;
24+
}
25+
26+
.fade-enter-from,
27+
.fade-leave-to {
28+
opacity: 0;
29+
}
30+
31+
/* Mobile menu transition */
32+
.mobile-menu-enter-active,
33+
.mobile-menu-leave-active {
34+
transition: transform 0.3s ease, opacity 0.3s ease;
35+
}
36+
37+
.mobile-menu-enter-from,
38+
.mobile-menu-leave-to {
39+
transform: translateX(-100%);
40+
opacity: 0;
41+
}
42+
43+
/* Dark mode toggle animation */
44+
.dark-mode-toggle {
45+
transition: transform 0.2s ease;
46+
}
47+
48+
.dark-mode-toggle:hover {
49+
transform: scale(1.05);
50+
}

‎docs-v3/assets/css/glass.css‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
/* ============================================
2+
Glass Effect Components
3+
Cards, panels, and badges with glass morphism
4+
============================================ */
5+
6+
/* Base glass card - transparent with blur */
7+
.glass-card {
8+
@apply rounded-2xl border backdrop-blur-sm transition-all duration-300;
9+
@apply border-gray-200 bg-gray-50/50;
10+
}
11+
12+
.glass-card:hover {
13+
@apply border-gray-300 bg-gray-100/50;
14+
}
15+
16+
.dark .glass-card {
17+
@apply border-gray-700/50 bg-gray-800/30;
18+
}
19+
20+
.dark .glass-card:hover {
21+
@apply border-gray-600 bg-gray-800/50;
22+
}
23+
24+
/* Glass card interactive - for clickable cards */
25+
.glass-card-interactive {
26+
@apply rounded-2xl border backdrop-blur-sm transition-all duration-300 cursor-pointer;
27+
@apply border-gray-200 bg-gray-50/50;
28+
}
29+
30+
.glass-card-interactive:hover {
31+
@apply border-gray-300 bg-gray-100/50 shadow-lg;
32+
}
33+
34+
.dark .glass-card-interactive {
35+
@apply border-gray-700/50 bg-gray-800/30;
36+
}
37+
38+
.dark .glass-card-interactive:hover {
39+
@apply border-gray-600/80 bg-gray-800/50;
40+
}
41+
42+
/* Glass card with colored accent on hover - removed color changes, using base hover effects */
43+
.glass-card-accent-red,
44+
.glass-card-accent-blue,
45+
.glass-card-accent-purple,
46+
.glass-card-accent-green {
47+
/* These classes now just use the base glass-card hover effects */
48+
}
49+
50+
/* Glass panel - for info boxes, alerts */
51+
.glass-panel {
52+
@apply rounded-xl border backdrop-blur-sm p-6;
53+
@apply border-gray-200 bg-gray-50/50;
54+
}
55+
56+
.dark .glass-panel {
57+
@apply border-gray-700/50 bg-gray-800/30;
58+
}
59+
60+
.glass-panel-blue {
61+
@apply rounded-xl border backdrop-blur-sm p-6;
62+
@apply border-blue-200/50 bg-blue-50/50;
63+
}
64+
65+
.dark .glass-panel-blue {
66+
@apply border-blue-500/20 bg-blue-500/10;
67+
}
68+
69+
.glass-panel-green {
70+
@apply rounded-xl border backdrop-blur-sm p-6;
71+
@apply border-green-200/50 bg-green-50/50;
72+
}
73+
74+
.dark .glass-panel-green {
75+
@apply border-green-500/20 bg-green-500/10;
76+
}
77+
78+
.glass-panel-yellow {
79+
@apply rounded-xl border backdrop-blur-sm p-6;
80+
@apply border-yellow-200/50 bg-yellow-50/50;
81+
}
82+
83+
.dark .glass-panel-yellow {
84+
@apply border-yellow-500/20 bg-yellow-500/10;
85+
}
86+
87+
.glass-panel-red {
88+
@apply rounded-xl border backdrop-blur-sm p-6;
89+
@apply border-red-200/50 bg-red-50/50;
90+
}
91+
92+
.dark .glass-panel-red {
93+
@apply border-red-500/20 bg-red-500/10;
94+
}
95+
96+
/* Icon badge - colored icon container with gradient */
97+
.icon-badge {
98+
@apply w-12 h-12 rounded-xl flex items-center justify-center transition-colors duration-300;
99+
}
100+
101+
.icon-badge-sm {
102+
@apply w-10 h-10 rounded-lg;
103+
}
104+
105+
.icon-badge-lg {
106+
@apply w-14 h-14 rounded-2xl;
107+
}
108+
109+
/* Glass style icon badges (for dark theme) */
110+
.icon-badge-blue {
111+
@apply bg-gradient-to-br from-blue-500/20 to-cyan-500/20 border border-blue-500/30;
112+
}
113+
114+
.icon-badge-blue:hover,
115+
.group:hover .icon-badge-blue {
116+
@apply border-blue-400/50;
117+
}
118+
119+
.icon-badge-green {
120+
@apply bg-gradient-to-br from-green-500/20 to-emerald-500/20 border border-green-500/30;
121+
}
122+
123+
.icon-badge-green:hover,
124+
.group:hover .icon-badge-green {
125+
@apply border-green-400/50;
126+
}
127+
128+
.icon-badge-purple {
129+
@apply bg-gradient-to-br from-purple-500/20 to-violet-500/20 border border-purple-500/30;
130+
}
131+
132+
.icon-badge-purple:hover,
133+
.group:hover .icon-badge-purple {
134+
@apply border-purple-400/50;
135+
}
136+
137+
.icon-badge-red {
138+
@apply bg-gradient-to-br from-red-500/20 to-pink-500/20 border border-red-500/30;
139+
}
140+
141+
.icon-badge-red:hover,
142+
.group:hover .icon-badge-red {
143+
@apply border-red-400/50;
144+
}
145+
146+
.icon-badge-yellow {
147+
@apply bg-gradient-to-br from-yellow-500/20 to-orange-500/20 border border-yellow-500/30;
148+
}
149+
150+
.icon-badge-yellow:hover,
151+
.group:hover .icon-badge-yellow {
152+
@apply border-yellow-400/50;
153+
}
154+
155+
.icon-badge-cyan {
156+
@apply bg-gradient-to-br from-cyan-500/20 to-blue-500/20 border border-cyan-500/30;
157+
}
158+
159+
.icon-badge-cyan:hover,
160+
.group:hover .icon-badge-cyan {
161+
@apply border-cyan-400/50;
162+
}
163+
164+
.icon-badge-gray {
165+
@apply bg-gradient-to-br from-gray-500/20 to-slate-500/20 border border-gray-500/30;
166+
}
167+
168+
.icon-badge-gray:hover,
169+
.group:hover .icon-badge-gray {
170+
@apply border-gray-400/50;
171+
}
172+
173+
/* Arrow indicator for list items */
174+
.arrow-indicator {
175+
@apply h-5 w-5 text-gray-400 transition-all;
176+
}
177+
178+
.group:hover .arrow-indicator {
179+
@apply text-gray-600 translate-x-1;
180+
}
181+
182+
.dark .group:hover .arrow-indicator {
183+
@apply text-gray-300;
184+
}

‎docs-v3/assets/css/main.css‎

Lines changed: 15 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,23 @@
1-
/* Custom fonts */
2-
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
3-
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
1+
/* ============================================
2+
Main CSS Entry Point
3+
Imports all modular CSS files
4+
============================================ */
45

6+
/* Tailwind and Nuxt UI */
57
@import "tailwindcss";
68
@import "@nuxt/ui";
79

8-
/* Tailwind v4 theme customization */
9-
@theme {
10-
--font-sans: 'Inter', system-ui, sans-serif;
11-
--font-mono: 'JetBrains Mono', Monaco, Consolas, monospace;
12-
}
10+
/* Theme configuration */
11+
@import "./theme.css";
1312

14-
/* Base styles */
15-
html {
16-
scroll-behavior: smooth;
17-
}
13+
/* Base styles and transitions */
14+
@import "./base.css";
1815

19-
/* Basic component styles */
20-
.nav-link-active {
21-
color: rgb(37 99 235);
22-
background-color: rgb(239 246 255);
23-
}
16+
/* Navigation styles */
17+
@import "./navigation.css";
2418

25-
.dark .nav-link-active {
26-
color: rgb(96 165 250);
27-
background-color: rgba(59 130 246 / 0.2);
28-
color: rgb(37 99 235);
29-
background-color: rgb(239 246 255);
30-
}
19+
/* Background styles */
20+
@import "./background.css";
3121

32-
.dark .nav-link-active {
33-
color: rgb(96 165 250);
34-
background-color: rgba(59 130 246 / 0.2);
35-
}
36-
37-
/* Content transitions */
38-
.fade-enter-active,
39-
.fade-leave-active {
40-
transition: opacity 0.2s ease;
41-
}
42-
43-
.fade-enter-from,
44-
.fade-leave-to {
45-
opacity: 0;
46-
}
47-
48-
/* Mobile menu animation */
49-
.mobile-menu-enter-active,
50-
.mobile-menu-leave-active {
51-
transition: transform 0.3s ease, opacity 0.3s ease;
52-
}
53-
54-
.mobile-menu-enter-from {
55-
transform: translateX(-100%);
56-
opacity: 0;
57-
}
58-
59-
.mobile-menu-leave-to {
60-
transform: translateX(-100%);
61-
opacity: 0;
62-
}
63-
64-
/* Dark mode toggle animation */
65-
.dark-mode-toggle {
66-
transition: transform 0.2s ease;
67-
}
68-
69-
.dark-mode-toggle:hover {
70-
transform: scale(1.05);
71-
}
72-
73-
/* Focus ring utility */
74-
.focus-ring {
75-
@apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
76-
77-
/* Focus ring utility */
78-
.focus-ring {
79-
@apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
80-
}
81-
}
22+
/* Glass effect components */
23+
@import "./glass.css";

0 commit comments

Comments
 (0)