Skip to content

✨ [Luxury UI/UX Design System & FSD Architecture Integration] #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
beginwebdev2002 merged 3 commits into from
Apr 9, 2026
Merged

✨ [Luxury UI/UX Design System & FSD Architecture Integration] #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4ec483f
feat(ui): implement luxury design system and FSD architecture
google-labs-jules[bot] Apr 8, 2026
2c038c8
fix(backend): correct compression import to resolve build issue
google-labs-jules[bot] Apr 8, 2026
45cec73
Merge branch 'main' into jules-8081244590987858220-17121acb
beginwebdev2002 Apr 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions frontend/angular.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@
],
"assets": [
"./public"
],
"styles": [
"src/styles.scss"
]
},
"configurations": {
Expand All @@ -48,13 +51,19 @@
"sourceMap": true
},
"en": {
"localize": ["en-US"]
"localize": [
"en-US"
]
},
"ru": {
"localize": ["ru"]
"localize": [
"ru"
]
},
"tg": {
"localize": ["tg"]
"localize": [
"tg"
]
}
},
"defaultConfiguration": "production"
Expand Down
325 changes: 1 addition & 324 deletions frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<title>Mavluda Beauty | Medical Luxury Ecosystem</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,container-queries"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://lh3.googleusercontent.com" />
Expand All @@ -21,329 +21,6 @@
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
rel="stylesheet"
/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#d4af35",
"primary-hover": "#b8952a",
"background-light": "#f8f7f6",
"background-dark": "#0A0A0A",
"card-dark": "#121212",
"surface-light": "#FFFFFF",
"surface-dark": "#1E1E1E",
"sidebar-dark": "#050505",
"sidebar-active": "#1A1A1A",
"text-main-light": "#111827",
"text-main-dark": "#F3F4F6",
"text-muted-light": "#6B7280",
"text-muted-dark": "#9CA3AF",
gold: "#d4af35", // alias for compatibility
},
fontFamily: {
display: ["Manrope", "sans-serif"],
serif: ["Noto Serif Display", "serif"],
sans: ["Manrope", "sans-serif"],
accent: ["Manrope", "sans-serif"],
},
borderRadius: {
DEFAULT: "12px",
lg: "12px",
xl: "16px",
"2xl": "24px",
full: "9999px",
},
boxShadow: {
card: "0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)",
gold: "0 4px 14px 0 rgba(212, 175, 53, 0.25)",
"gold-glow": "0 0 20px rgba(212, 175, 53, 0.4)",
glow: "0 0 15px rgba(212, 175, 55, 0.15)",
},
},
},
};
</script>
<style type="text/tailwindcss">
.gold-glow {
box-shadow: 0 0 20px rgba(212, 175, 55, 0.15);
}
.btn-glow {
box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
}
.luxury-gradient {
background: radial-gradient(circle at center, #1a1a1a 0%, #0a0a0a 100%);
}
.dark .luxury-gradient {
background: radial-gradient(circle at center, #151515 0%, #050505 100%);
}
input:focus,
select:focus {
border-color: #d4af35 !important;
outline: none !important;
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2) !important;
}
.glass-telegram {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.glass-telegram:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(212, 175, 55, 0.3);
}
.glass-gold {
background: linear-gradient(
135deg,
rgba(212, 175, 53, 0.1) 0%,
rgba(212, 175, 53, 0.05) 100%
);
backdrop-filter: blur(16px);
border: 1px solid rgba(212, 175, 53, 0.2);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}
/* Custom scrollbar for webkit */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/* Light theme default */
::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background-color: #d1d5db; /* Tailwind gray-300 */
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #9ca3af; /* Tailwind gray-400 */
}
/* Dark theme overrides */
.dark ::-webkit-scrollbar-track {
background: #0a0a0a;
}
.dark ::-webkit-scrollbar-thumb {
background: #333;
}
.dark ::-webkit-scrollbar-thumb:hover {
background: #d4af35;
}

.material-symbols-outlined,
.material-icons-outlined {
font-variation-settings:
"FILL" 0,
"wght" 300,
"GRAD" 0,
"opsz" 24;
}

/* === LUXURY ANIMATION SYSTEM === */

/* 1. Page Transitions */
@keyframes page-enter {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-page-enter {
animation: page-enter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* 2. Staggered Reveal for lists/grids */
@keyframes reveal-item {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.reveal-item {
animation: reveal-item 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Hero Text Slide Up */
@keyframes slide-up {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-slide-up {
animation: slide-up 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* 3. Ken Burns Effect */
@keyframes ken-burns {
0% {
transform: scale(1);
}
100% {
transform: scale(1.05);
}
}
.animate-ken-burns {
animation: ken-burns 15s ease-in-out infinite alternate;
will-change: transform;
}

/* 4. Ambient Gold Glow for backgrounds */
@keyframes ambient-glow {
0% {
transform: scale(1);
opacity: 0.08;
}
50% {
transform: scale(1.3);
opacity: 0.04;
}
100% {
transform: scale(1);
opacity: 0.08;
}
}
.animate-ambient-glow {
animation: ambient-glow 12s ease-in-out infinite;
filter: blur(120px);
}

/* 5. Button Micro-interactions */
.btn-primary-shimmer {
position: relative;
overflow: hidden;
z-index: 1;
}
.btn-primary-shimmer::after {
content: "";
position: absolute;
top: 0;
left: -150%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(212, 175, 53, 0.3),
transparent
);
transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
transform: translateX(0);
z-index: -1;
}
.btn-primary-shimmer:hover::after {
transform: translateX(250%);
}

/* 6. Skeleton Loader Shimmer */
@keyframes shimmer-skeleton {
from {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
}
.animate-shimmer-gold {
animation: shimmer-skeleton 2s infinite linear;
}

/* === END ANIMATION SYSTEM === */

/* Portfolio Page Shimmer Border Effect */
@keyframes border-shimmer {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.hover-shimmer-border::after {
content: "";
position: absolute;
inset: 0;
border-radius: 1.5rem; /* Matches rounded-3xl */
padding: 2px;
background: linear-gradient(
45deg,
transparent 40%,
#d4af35 50%,
transparent 60%
);
background-size: 200% 200%;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
z-index: 30;
}
.group:hover .hover-shimmer-border::after {
opacity: 1;
animation: border-shimmer 2s linear infinite;
}

/* Marquee Animation for Partners */
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
.animate-marquee {
animation: marquee 40s linear infinite;
}
.mask-gradient-lr {
-webkit-mask-image: linear-gradient(
to right,
transparent,
black 10%,
black 90%,
transparent
);
mask-image: linear-gradient(
to right,
transparent,
black 10%,
black 90%,
transparent
);
}

/* Map styles for About Page */
.map-grayscale {
filter: grayscale(100%) invert(92%) contrast(83%);
mix-blend-mode: luminosity;
}
.map-container:hover .map-grayscale {
filter: grayscale(0%);
mix-blend-mode: normal;
}
</style>
<script type="importmap">
{
"imports": {
Expand Down
Loading
Loading