update
This commit is contained in:
Iliyan Angelov
@@ -1,45 +0,0 @@
|
||||
// Blog category data - Replace with API call to get blog categories
|
||||
export const BlogCategoryButtons = [
|
||||
{
|
||||
id: 1,
|
||||
title: "All",
|
||||
slug: "all",
|
||||
display_order: 1
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Enterprise Software",
|
||||
slug: "enterprise-software",
|
||||
display_order: 2
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Digital Transformation",
|
||||
slug: "digital-transformation",
|
||||
display_order: 3
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "System Integration",
|
||||
slug: "system-integration",
|
||||
display_order: 4
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Cloud Solutions",
|
||||
slug: "cloud-solutions",
|
||||
display_order: 5
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Security",
|
||||
slug: "security",
|
||||
display_order: 6
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: "API Development",
|
||||
slug: "api-development",
|
||||
display_order: 7
|
||||
}
|
||||
];
|
||||
@@ -1,76 +0,0 @@
|
||||
// Blog post data - Replace with API call to postsAPI.getAll()
|
||||
import one from "@/public/images/blog/one.png";
|
||||
import two from "@/public/images/blog/two.png";
|
||||
import three from "@/public/images/blog/three.png";
|
||||
import four from "@/public/images/blog/four.png";
|
||||
import five from "@/public/images/blog/five.png";
|
||||
import six from "@/public/images/blog/six.png";
|
||||
import seven from "@/public/images/blog/seven.png";
|
||||
import eight from "@/public/images/blog/eight.png";
|
||||
|
||||
export const BlogPostData = [
|
||||
{
|
||||
id: 1,
|
||||
title: "The Future of Enterprise Software Architecture",
|
||||
thumb: one,
|
||||
category: "enterprise-software",
|
||||
author: "Sarah Johnson",
|
||||
date: "15 Jan 2024",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Digital Transformation Strategies for Large Enterprises",
|
||||
thumb: two,
|
||||
category: "digital-transformation",
|
||||
author: "Michael Chen",
|
||||
date: "12 Jan 2024",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "API-First Approach to System Integration",
|
||||
thumb: three,
|
||||
category: "system-integration",
|
||||
author: "Emily Rodriguez",
|
||||
date: "10 Jan 2024",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Cloud Migration Best Practices for Enterprise",
|
||||
thumb: four,
|
||||
category: "cloud-solutions",
|
||||
author: "David Thompson",
|
||||
date: "08 Jan 2024",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Enterprise Security in the Digital Age",
|
||||
thumb: five,
|
||||
category: "security",
|
||||
author: "Sarah Johnson",
|
||||
date: "05 Jan 2024",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Building Scalable API Architectures",
|
||||
thumb: six,
|
||||
category: "api-development",
|
||||
author: "Michael Chen",
|
||||
date: "03 Jan 2024",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: "Microservices Architecture for Enterprise Applications",
|
||||
thumb: seven,
|
||||
category: "enterprise-software",
|
||||
author: "Emily Rodriguez",
|
||||
date: "01 Jan 2024",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: "Data Analytics and Business Intelligence Solutions",
|
||||
thumb: eight,
|
||||
category: "digital-transformation",
|
||||
author: "David Thompson",
|
||||
date: "29 Dec 2023",
|
||||
}
|
||||
];
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
BIN
gnx-react/public/images/leading.jpg
Normal file
BIN
gnx-react/public/images/leading.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 758 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 2.0 KiB |
@@ -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 {
|
||||
|
||||
@@ -70,19 +70,28 @@
|
||||
h3 {
|
||||
font-size: var(--text-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--secondary-800);
|
||||
color: #ffffff !important;
|
||||
margin: 0 0 var(--space-2) 0;
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--secondary-600);
|
||||
color: #ffffff !important;
|
||||
margin: 0 0 var(--space-3) 0;
|
||||
line-height: var(--leading-relaxed);
|
||||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
// Force white color with higher specificity
|
||||
&.cookie-consent-banner .cookie-consent-banner__text h3 {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
&.cookie-consent-banner .cookie-consent-banner__text p {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
&__links {
|
||||
display: flex;
|
||||
@@ -618,11 +627,11 @@
|
||||
border-top-color: var(--secondary-700);
|
||||
|
||||
&__text h3 {
|
||||
color: var(--secondary-100);
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
&__text p {
|
||||
color: var(--secondary-300);
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -2,12 +2,21 @@
|
||||
--------- (4.02) banner styles start ---------
|
||||
==== */
|
||||
|
||||
// CSS custom property for dynamic viewport height (better mobile support)
|
||||
:root {
|
||||
--vh: 1vh;
|
||||
}
|
||||
|
||||
// 4.02.01 modern banner styles start
|
||||
.modern-banner {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100); // Dynamic viewport height for mobile browsers
|
||||
min-height: 100vh;
|
||||
min-height: -webkit-fill-available; // iOS viewport fix
|
||||
background: #0a0a0a;
|
||||
overflow: hidden;
|
||||
overflow-x: hidden; // Prevent horizontal scroll
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@@ -610,6 +619,23 @@
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 80px 0;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media (max-width: 1199.98px) {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
max-width: 100%;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-content {
|
||||
@@ -645,6 +671,31 @@
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
// Mobile visibility enhancement
|
||||
@media (max-width: 991.98px) {
|
||||
background: linear-gradient(135deg, rgba(30, 64, 175, 0.25), rgba(14, 165, 233, 0.25));
|
||||
border: 2px solid rgba(14, 165, 233, 0.7);
|
||||
color: #3dd5f3;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 0 15px rgba(14, 165, 233, 0.35),
|
||||
0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
text-shadow: 0 0 8px rgba(14, 165, 233, 0.5);
|
||||
|
||||
i {
|
||||
filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.6));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
background: rgba(14, 165, 233, 0.3);
|
||||
border: 2px solid rgba(14, 165, 233, 0.8);
|
||||
color: #5de4ff;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 0 20px rgba(14, 165, 233, 0.5),
|
||||
0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
text-shadow: 0 0 10px rgba(14, 165, 233, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -703,6 +754,7 @@
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
margin-bottom: 24px;
|
||||
padding: 8px 0;
|
||||
|
||||
.indicator {
|
||||
width: 8px;
|
||||
@@ -712,6 +764,9 @@
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
padding: 0;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
&.active {
|
||||
background: #0ea5e9;
|
||||
@@ -719,10 +774,19 @@
|
||||
box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:hover:not(.active) {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3);
|
||||
}
|
||||
|
||||
&:focus:not(:focus-visible) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -746,11 +810,18 @@
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 6px 24px rgba(30, 64, 175, 0.3);
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 32px rgba(30, 64, 175, 0.4);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 15px;
|
||||
@@ -776,12 +847,19 @@
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 15px;
|
||||
@@ -833,6 +911,8 @@
|
||||
z-index: 20;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
&:hover {
|
||||
color: #0ea5e9;
|
||||
@@ -853,6 +933,10 @@
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
|
||||
Reference in New Issue
Block a user