gnx/GNX-WEB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Iliyan Angelov
2025-10-13 01:49:06 +03:00
parent 76c857b4f5
commit 5ad9cbe3a6
97 changed files with 5752 additions and 2376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

363
gnx-react/public/styles/_responsive.scss
View File

@@ -406,6 +406,10 @@
font-size: 11px;
padding: 6px 14px;
letter-spacing: 0.8px;
background: rgba(14, 165, 233, 0.15) !important;
border-color: rgba(14, 165, 233, 0.5) !important;
color: #0ea5e9 !important;
font-weight: 600;
i {
font-size: 12px;
@@ -1096,12 +1100,17 @@
margin-bottom: 8px;
.badge {
font-size: 9px;
padding: 4px 10px;
font-size: 10px;
padding: 5px 12px;
letter-spacing: 0.4px;
background: rgba(14, 165, 233, 0.2) !important;
border-color: rgba(14, 165, 233, 0.6) !important;
color: #3dd5f3 !important;
font-weight: 700;
box-shadow: 0 0 10px rgba(14, 165, 233, 0.3);
i {
font-size: 10px;
font-size: 11px;
}
}
}
@@ -1183,6 +1192,354 @@
}
}
// Extra extra small screens (< 375px)
@media only screen and (max-width: 374.98px) {
.modern-banner {
min-height: 100vh;
.container {
padding: 20px 0;
}
.content-center {
padding: 0 8px;
.badge-container {
margin-bottom: 6px;
.badge {
font-size: 9px;
padding: 4px 10px;
letter-spacing: 0.3px;
gap: 4px;
background: rgba(14, 165, 233, 0.25) !important;
border-color: rgba(14, 165, 233, 0.7) !important;
color: #5de4ff !important;
font-weight: 700;
box-shadow: 0 0 12px rgba(14, 165, 233, 0.4);
i {
font-size: 10px;
}
}
}
.main-heading {
font-size: clamp(1rem, 7vw, 1.3rem);
margin-bottom: 8px;
line-height: 1.1;
}
.description {
font-size: 11px;
margin-bottom: 14px;
line-height: 1.3;
}
.carousel-indicators {
margin-bottom: 14px;
gap: 3px;
.indicator {
width: 3px;
height: 3px;
}
}
.cta-section {
gap: 3px;
margin-bottom: 16px;
.cta-primary,
.cta-secondary {
max-width: 220px;
padding: 7px 12px;
font-size: 10px;
i {
font-size: 10px;
}
}
}
.trust-indicators {
gap: 10px;
.trust-item {
min-width: 55px;
.trust-number {
font-size: 0.9rem;
margin-bottom: 2px;
}
.trust-label {
font-size: 6.5px;
letter-spacing: 0.3px;
}
}
}
}
.banner-background {
.gradient-orb {
&.orb-1 {
width: 100px;
height: 100px;
}
&.orb-2 {
width: 80px;
height: 80px;
}
&.orb-3 {
width: 60px;
height: 60px;
}
}
}
}
}
// Landscape orientation for phones
@media only screen and (max-height: 500px) and (orientation: landscape) {
.modern-banner {
min-height: auto;
height: auto;
padding: 20px 0;
.container {
padding: 20px 0;
}
.banner-content {
margin-bottom: 10px;
}
.content-center {
max-width: 100%;
padding: 0 15px;
.badge-container {
margin-bottom: 8px;
.badge {
font-size: 10px;
padding: 5px 12px;
background: rgba(14, 165, 233, 0.18) !important;
border-color: rgba(14, 165, 233, 0.55) !important;
color: #3dd5f3 !important;
font-weight: 600;
box-shadow: 0 0 8px rgba(14, 165, 233, 0.25);
}
}
.main-heading {
font-size: clamp(1.2rem, 3vh, 1.6rem);
margin-bottom: 8px;
line-height: 1.1;
}
.description {
font-size: 12px;
margin-bottom: 12px;
line-height: 1.3;
max-width: 90%;
}
.carousel-indicators {
margin-bottom: 12px;
.indicator {
width: 5px;
height: 5px;
}
}
.cta-section {
flex-direction: row;
gap: 8px;
margin-bottom: 12px;
justify-content: center;
.cta-primary,
.cta-secondary {
width: auto;
max-width: 180px;
padding: 8px 16px;
font-size: 11px;
}
}
.trust-indicators {
gap: 15px;
margin-bottom: 10px;
.trust-item {
min-width: 65px;
.trust-number {
font-size: 1rem;
margin-bottom: 2px;
}
.trust-label {
font-size: 7px;
}
}
}
}
.banner-background {
.gradient-orb {
opacity: 0.2;
&.orb-1 {
width: 150px;
height: 150px;
}
&.orb-2 {
width: 100px;
height: 100px;
}
&.orb-3 {
display: none;
}
}
.enterprise-bg-elements {
display: none;
}
}
.scroll-indicator {
display: none;
}
}
}
// Tablet landscape (iPad, etc.)
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.modern-banner {
min-height: 90vh;
.container {
padding: 40px 0;
}
.content-center {
max-width: 700px;
.main-heading {
font-size: clamp(2rem, 4vw, 3rem);
margin-bottom: 14px;
}
.description {
font-size: 15px;
margin-bottom: 20px;
max-width: 600px;
}
.cta-section {
gap: 10px;
margin-bottom: 25px;
}
.trust-indicators {
gap: 25px;
}
}
.banner-background {
.enterprise-bg-elements {
opacity: 0.1;
.flying-code,
.request-response-data,
.space-data-generation {
display: none;
}
}
}
}
}
// Large tablets and small laptops (portrait)
@media only screen and (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
.modern-banner {
min-height: 100vh;
.content-center {
max-width: 600px;
padding: 0 30px;
.main-heading {
font-size: clamp(1.8rem, 4vw, 2.5rem);
margin-bottom: 16px;
}
.description {
font-size: 15px;
margin-bottom: 24px;
}
.cta-section {
flex-direction: row;
gap: 12px;
margin-bottom: 30px;
.cta-primary,
.cta-secondary {
width: auto;
min-width: 180px;
}
}
}
}
}
// Touch device optimizations
@media (hover: none) and (pointer: coarse) {
.modern-banner {
.content-center {
.carousel-indicators {
.indicator {
width: 10px;
height: 10px;
margin: 0 2px;
&:not(.active) {
opacity: 0.5;
}
}
}
.cta-section {
.cta-primary,
.cta-secondary {
min-height: 44px; // Apple's minimum touch target size
display: flex;
align-items: center;
justify-content: center;
}
}
}
// Reduce animations for better performance on mobile devices
.banner-background {
.enterprise-bg-elements {
* {
animation-duration: 1.5x !important; // Slow down animations
}
}
}
}
}
@media only screen and (min-width: 1400px) {
.tp-banner {
.tp-banner__content {