Skip to content

Commit cdfb291

Browse files
beginwebdev2002beginwebdev2002
authored
Merge pull request #7 from beginwebdev2002/jules-8081244590987858220-17121acb
✨ [Luxury UI/UX Design System & FSD Architecture Integration]
2 parents 87ce912 + 45cec73 commit cdfb291

13 files changed

Lines changed: 2983 additions & 361 deletions

‎frontend/angular.json‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@
3030
],
3131
"assets": [
3232
"./public"
33+
],
34+
"styles": [
35+
"src/styles.scss"
3336
]
3437
},
3538
"configurations": {
@@ -48,13 +51,19 @@
4851
"sourceMap": true
4952
},
5053
"en": {
51-
"localize": ["en-US"]
54+
"localize": [
55+
"en-US"
56+
]
5257
},
5358
"ru": {
54-
"localize": ["ru"]
59+
"localize": [
60+
"ru"
61+
]
5562
},
5663
"tg": {
57-
"localize": ["tg"]
64+
"localize": [
65+
"tg"
66+
]
5867
}
5968
},
6069
"defaultConfiguration": "production"

‎frontend/index.html‎

Lines changed: 1 addition & 324 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<title>Mavluda Beauty | Medical Luxury Ecosystem</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<script src="https://telegram.org/js/telegram-web-app.js"></script>
8-
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,container-queries"></script>
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
99
<link rel="preconnect" href="https://fonts.googleapis.com" />
1010
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
1111
<link rel="preconnect" href="https://lh3.googleusercontent.com" />
@@ -21,329 +21,6 @@
2121
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
2222
rel="stylesheet"
2323
/>
24-
<script>
25-
tailwind.config = {
26-
darkMode: "class",
27-
theme: {
28-
extend: {
29-
colors: {
30-
primary: "#d4af35",
31-
"primary-hover": "#b8952a",
32-
"background-light": "#f8f7f6",
33-
"background-dark": "#0A0A0A",
34-
"card-dark": "#121212",
35-
"surface-light": "#FFFFFF",
36-
"surface-dark": "#1E1E1E",
37-
"sidebar-dark": "#050505",
38-
"sidebar-active": "#1A1A1A",
39-
"text-main-light": "#111827",
40-
"text-main-dark": "#F3F4F6",
41-
"text-muted-light": "#6B7280",
42-
"text-muted-dark": "#9CA3AF",
43-
gold: "#d4af35", // alias for compatibility
44-
},
45-
fontFamily: {
46-
display: ["Manrope", "sans-serif"],
47-
serif: ["Noto Serif Display", "serif"],
48-
sans: ["Manrope", "sans-serif"],
49-
accent: ["Manrope", "sans-serif"],
50-
},
51-
borderRadius: {
52-
DEFAULT: "12px",
53-
lg: "12px",
54-
xl: "16px",
55-
"2xl": "24px",
56-
full: "9999px",
57-
},
58-
boxShadow: {
59-
card: "0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)",
60-
gold: "0 4px 14px 0 rgba(212, 175, 53, 0.25)",
61-
"gold-glow": "0 0 20px rgba(212, 175, 53, 0.4)",
62-
glow: "0 0 15px rgba(212, 175, 55, 0.15)",
63-
},
64-
},
65-
},
66-
};
67-
</script>
68-
<style type="text/tailwindcss">
69-
.gold-glow {
70-
box-shadow: 0 0 20px rgba(212, 175, 55, 0.15);
71-
}
72-
.btn-glow {
73-
box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
74-
}
75-
.luxury-gradient {
76-
background: radial-gradient(circle at center, #1a1a1a 0%, #0a0a0a 100%);
77-
}
78-
.dark .luxury-gradient {
79-
background: radial-gradient(circle at center, #151515 0%, #050505 100%);
80-
}
81-
input:focus,
82-
select:focus {
83-
border-color: #d4af35 !important;
84-
outline: none !important;
85-
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2) !important;
86-
}
87-
.glass-telegram {
88-
background: rgba(255, 255, 255, 0.03);
89-
backdrop-filter: blur(10px);
90-
border: 1px solid rgba(255, 255, 255, 0.08);
91-
}
92-
.glass-telegram:hover {
93-
background: rgba(255, 255, 255, 0.06);
94-
border-color: rgba(212, 175, 55, 0.3);
95-
}
96-
.glass-gold {
97-
background: linear-gradient(
98-
135deg,
99-
rgba(212, 175, 53, 0.1) 0%,
100-
rgba(212, 175, 53, 0.05) 100%
101-
);
102-
backdrop-filter: blur(16px);
103-
border: 1px solid rgba(212, 175, 53, 0.2);
104-
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
105-
}
106-
/* Custom scrollbar for webkit */
107-
::-webkit-scrollbar {
108-
width: 8px;
109-
height: 8px;
110-
}
111-
/* Light theme default */
112-
::-webkit-scrollbar-track {
113-
background-color: #f1f1f1;
114-
}
115-
::-webkit-scrollbar-thumb {
116-
background-color: #d1d5db; /* Tailwind gray-300 */
117-
border-radius: 4px;
118-
}
119-
::-webkit-scrollbar-thumb:hover {
120-
background-color: #9ca3af; /* Tailwind gray-400 */
121-
}
122-
/* Dark theme overrides */
123-
.dark ::-webkit-scrollbar-track {
124-
background: #0a0a0a;
125-
}
126-
.dark ::-webkit-scrollbar-thumb {
127-
background: #333;
128-
}
129-
.dark ::-webkit-scrollbar-thumb:hover {
130-
background: #d4af35;
131-
}
132-
133-
.material-symbols-outlined,
134-
.material-icons-outlined {
135-
font-variation-settings:
136-
"FILL" 0,
137-
"wght" 300,
138-
"GRAD" 0,
139-
"opsz" 24;
140-
}
141-
142-
/* === LUXURY ANIMATION SYSTEM === */
143-
144-
/* 1. Page Transitions */
145-
@keyframes page-enter {
146-
from {
147-
opacity: 0;
148-
transform: translateY(15px);
149-
}
150-
to {
151-
opacity: 1;
152-
transform: translateY(0);
153-
}
154-
}
155-
.animate-page-enter {
156-
animation: page-enter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
157-
}
158-
159-
/* 2. Staggered Reveal for lists/grids */
160-
@keyframes reveal-item {
161-
from {
162-
opacity: 0;
163-
transform: translateY(20px);
164-
}
165-
to {
166-
opacity: 1;
167-
transform: translateY(0);
168-
}
169-
}
170-
.reveal-item {
171-
animation: reveal-item 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
172-
}
173-
174-
/* Hero Text Slide Up */
175-
@keyframes slide-up {
176-
from {
177-
opacity: 0;
178-
transform: translateY(30px);
179-
}
180-
to {
181-
opacity: 1;
182-
transform: translateY(0);
183-
}
184-
}
185-
.animate-slide-up {
186-
animation: slide-up 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
187-
}
188-
189-
/* 3. Ken Burns Effect */
190-
@keyframes ken-burns {
191-
0% {
192-
transform: scale(1);
193-
}
194-
100% {
195-
transform: scale(1.05);
196-
}
197-
}
198-
.animate-ken-burns {
199-
animation: ken-burns 15s ease-in-out infinite alternate;
200-
will-change: transform;
201-
}
202-
203-
/* 4. Ambient Gold Glow for backgrounds */
204-
@keyframes ambient-glow {
205-
0% {
206-
transform: scale(1);
207-
opacity: 0.08;
208-
}
209-
50% {
210-
transform: scale(1.3);
211-
opacity: 0.04;
212-
}
213-
100% {
214-
transform: scale(1);
215-
opacity: 0.08;
216-
}
217-
}
218-
.animate-ambient-glow {
219-
animation: ambient-glow 12s ease-in-out infinite;
220-
filter: blur(120px);
221-
}
222-
223-
/* 5. Button Micro-interactions */
224-
.btn-primary-shimmer {
225-
position: relative;
226-
overflow: hidden;
227-
z-index: 1;
228-
}
229-
.btn-primary-shimmer::after {
230-
content: "";
231-
position: absolute;
232-
top: 0;
233-
left: -150%;
234-
width: 100%;
235-
height: 100%;
236-
background: linear-gradient(
237-
90deg,
238-
transparent,
239-
rgba(212, 175, 53, 0.3),
240-
transparent
241-
);
242-
transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
243-
transform: translateX(0);
244-
z-index: -1;
245-
}
246-
.btn-primary-shimmer:hover::after {
247-
transform: translateX(250%);
248-
}
249-
250-
/* 6. Skeleton Loader Shimmer */
251-
@keyframes shimmer-skeleton {
252-
from {
253-
transform: translateX(-100%);
254-
}
255-
to {
256-
transform: translateX(100%);
257-
}
258-
}
259-
.animate-shimmer-gold {
260-
animation: shimmer-skeleton 2s infinite linear;
261-
}
262-
263-
/* === END ANIMATION SYSTEM === */
264-
265-
/* Portfolio Page Shimmer Border Effect */
266-
@keyframes border-shimmer {
267-
0% {
268-
background-position: 0% 50%;
269-
}
270-
50% {
271-
background-position: 100% 50%;
272-
}
273-
100% {
274-
background-position: 0% 50%;
275-
}
276-
}
277-
.hover-shimmer-border::after {
278-
content: "";
279-
position: absolute;
280-
inset: 0;
281-
border-radius: 1.5rem; /* Matches rounded-3xl */
282-
padding: 2px;
283-
background: linear-gradient(
284-
45deg,
285-
transparent 40%,
286-
#d4af35 50%,
287-
transparent 60%
288-
);
289-
background-size: 200% 200%;
290-
-webkit-mask:
291-
linear-gradient(#fff 0 0) content-box,
292-
linear-gradient(#fff 0 0);
293-
mask:
294-
linear-gradient(#fff 0 0) content-box,
295-
linear-gradient(#fff 0 0);
296-
-webkit-mask-composite: xor;
297-
mask-composite: exclude;
298-
opacity: 0;
299-
transition: opacity 0.5s ease;
300-
pointer-events: none;
301-
z-index: 30;
302-
}
303-
.group:hover .hover-shimmer-border::after {
304-
opacity: 1;
305-
animation: border-shimmer 2s linear infinite;
306-
}
307-
308-
/* Marquee Animation for Partners */
309-
@keyframes marquee {
310-
from {
311-
transform: translateX(0);
312-
}
313-
to {
314-
transform: translateX(-50%);
315-
}
316-
}
317-
.animate-marquee {
318-
animation: marquee 40s linear infinite;
319-
}
320-
.mask-gradient-lr {
321-
-webkit-mask-image: linear-gradient(
322-
to right,
323-
transparent,
324-
black 10%,
325-
black 90%,
326-
transparent
327-
);
328-
mask-image: linear-gradient(
329-
to right,
330-
transparent,
331-
black 10%,
332-
black 90%,
333-
transparent
334-
);
335-
}
336-
337-
/* Map styles for About Page */
338-
.map-grayscale {
339-
filter: grayscale(100%) invert(92%) contrast(83%);
340-
mix-blend-mode: luminosity;
341-
}
342-
.map-container:hover .map-grayscale {
343-
filter: grayscale(0%);
344-
mix-blend-mode: normal;
345-
}
346-
</style>
34724
<script type="importmap">
34825
{
34926
"imports": {

0 commit comments

Comments
 (0)