update
This commit is contained in:
Iliyan Angelov
@@ -2,7 +2,6 @@ import Header from "@/components/shared/layout/header/Header";
|
|||||||
import CareerBanner from "@/components/pages/career/CareerBanner";
|
import CareerBanner from "@/components/pages/career/CareerBanner";
|
||||||
import OpenPosition from "@/components/pages/career/OpenPosition";
|
import OpenPosition from "@/components/pages/career/OpenPosition";
|
||||||
import Thrive from "@/components/pages/career/Thrive";
|
import Thrive from "@/components/pages/career/Thrive";
|
||||||
import MasonryGallery from "@/components/pages/career/MasonryGallery";
|
|
||||||
import Footer from "@/components/shared/layout/footer/Footer";
|
import Footer from "@/components/shared/layout/footer/Footer";
|
||||||
import CareerScrollProgressButton from "@/components/pages/career/CareerScrollProgressButton";
|
import CareerScrollProgressButton from "@/components/pages/career/CareerScrollProgressButton";
|
||||||
import CareerInitAnimations from "@/components/pages/career/CareerInitAnimations";
|
import CareerInitAnimations from "@/components/pages/career/CareerInitAnimations";
|
||||||
@@ -15,7 +14,6 @@ const page = () => {
|
|||||||
<CareerBanner />
|
<CareerBanner />
|
||||||
<OpenPosition />
|
<OpenPosition />
|
||||||
<Thrive />
|
<Thrive />
|
||||||
<MasonryGallery />
|
|
||||||
</main>
|
</main>
|
||||||
<Footer />
|
<Footer />
|
||||||
<CareerScrollProgressButton />
|
<CareerScrollProgressButton />
|
||||||
|
|||||||
@@ -64,8 +64,20 @@ export default function RootLayout({
|
|||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en" style={{ scrollBehavior: 'auto', overflow: 'auto' }}>
|
||||||
<body className={`${inter.variable} ${montserrat.variable}`}>
|
<head>
|
||||||
|
<script
|
||||||
|
dangerouslySetInnerHTML={{
|
||||||
|
__html: `
|
||||||
|
if ('scrollRestoration' in history) {
|
||||||
|
history.scrollRestoration = 'manual';
|
||||||
|
}
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
|
<body className={`${inter.variable} ${montserrat.variable}`} style={{ scrollBehavior: 'auto', overflow: 'auto' }}>
|
||||||
<CookieConsentProvider
|
<CookieConsentProvider
|
||||||
config={{
|
config={{
|
||||||
companyName: "EnterpriseSoft Solutions",
|
companyName: "EnterpriseSoft Solutions",
|
||||||
|
|||||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
@@ -84,7 +84,7 @@ const AboutServiceComponent = () => {
|
|||||||
{serviceData?.title || "Enterprise Technology Leaders"}
|
{serviceData?.title || "Enterprise Technology Leaders"}
|
||||||
</h2>
|
</h2>
|
||||||
<p>
|
<p>
|
||||||
{serviceData?.description || "Founded in 2008, EnterpriseSoft Solutions has emerged as a premier enterprise software company, serving Fortune 500 companies and innovative startups worldwide. Our team of 200+ engineers, architects, and consultants specializes in delivering mission-critical software solutions that drive digital transformation and business growth."}
|
{serviceData?.description || "Founded 2008, EnterpriseSoft Solutions has emerged as a premier enterprise software company, serving Fortune 500 companies and innovative startups worldwide. Our team of 200+ engineers, architects, and consultants specializes in delivering mission-critical software solutions that drive digital transformation and business growth."}
|
||||||
</p>
|
</p>
|
||||||
<div className="enterprise-features">
|
<div className="enterprise-features">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
|
|||||||
@@ -2,9 +2,7 @@
|
|||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import gsap from "gsap";
|
import gsap from "gsap";
|
||||||
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
|
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
|
||||||
import Image from "next/legacy/image";
|
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import thumb from "@/public/images/banner/cp-thumb.png";
|
|
||||||
|
|
||||||
const CareerBanner = () => {
|
const CareerBanner = () => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -38,23 +36,77 @@ const CareerBanner = () => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="career-banner fix-top bg-black position-relative overflow-hidden">
|
<section className="career-banner fix-top bg-black position-relative overflow-hidden" style={{ minHeight: '50vh', paddingTop: '100px', paddingBottom: '60px' }}>
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="row justify-content-end">
|
<div className="row justify-content-center align-items-center">
|
||||||
<div className="col-12 col-lg-11">
|
<div className="col-12 col-lg-10">
|
||||||
<div className="row align-items-center">
|
<div className="cp-banner__content text-center">
|
||||||
<div className="col-12 col-sm-11 col-md-10 col-xl-8 col-xxl-9">
|
<h2 className="mt-8 fw-7 text-xxl title-anim text-white mb-5">
|
||||||
<div className="cp-banner__content">
|
Build Your Career with Enterprise Excellence
|
||||||
<h2 className="mt-8 fw-7 text-xxl title-anim text-white">
|
</h2>
|
||||||
Grow your career the way you feel
|
<p className="text-quinary fs-5 mb-5" style={{ maxWidth: '700px', margin: '0 auto 2rem' }}>
|
||||||
</h2>
|
Join our global team of innovators, problem-solvers, and tech leaders building the future of digital solutions
|
||||||
</div>
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Job Categories with Icons */}
|
||||||
|
<div className="row justify-content-center mt-5 pt-4">
|
||||||
|
<div className="col-6 col-md-3 text-center mb-4">
|
||||||
|
<div className="job-category-card" style={{
|
||||||
|
padding: '2rem 1rem',
|
||||||
|
background: 'rgba(255,255,255,0.05)',
|
||||||
|
borderRadius: '12px',
|
||||||
|
border: '1px solid rgba(255,255,255,0.1)',
|
||||||
|
transition: 'all 0.3s ease'
|
||||||
|
}}>
|
||||||
|
<div className="icon-wrapper mb-3" style={{ fontSize: '3rem', color: '#00d4ff' }}>
|
||||||
|
<i className="fa-solid fa-code"></i>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 col-sm-1 col-md-2 col-xl-4 col-xxl-3">
|
<h5 className="text-white fw-6 mb-2">Engineering</h5>
|
||||||
<div className="cp-banner-thumb dir-rtl">
|
</div>
|
||||||
<Image src={thumb} className="mh-300 unset" alt="Image" width={400} height={300} />
|
</div>
|
||||||
</div>
|
<div className="col-6 col-md-3 text-center mb-4">
|
||||||
|
<div className="job-category-card" style={{
|
||||||
|
padding: '2rem 1rem',
|
||||||
|
background: 'rgba(255,255,255,0.05)',
|
||||||
|
borderRadius: '12px',
|
||||||
|
border: '1px solid rgba(255,255,255,0.1)',
|
||||||
|
transition: 'all 0.3s ease'
|
||||||
|
}}>
|
||||||
|
<div className="icon-wrapper mb-3" style={{ fontSize: '3rem', color: '#ff6b9d' }}>
|
||||||
|
<i className="fa-solid fa-palette"></i>
|
||||||
</div>
|
</div>
|
||||||
|
<h5 className="text-white fw-6 mb-2">Design</h5>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-6 col-md-3 text-center mb-4">
|
||||||
|
<div className="job-category-card" style={{
|
||||||
|
padding: '2rem 1rem',
|
||||||
|
background: 'rgba(255,255,255,0.05)',
|
||||||
|
borderRadius: '12px',
|
||||||
|
border: '1px solid rgba(255,255,255,0.1)',
|
||||||
|
transition: 'all 0.3s ease'
|
||||||
|
}}>
|
||||||
|
<div className="icon-wrapper mb-3" style={{ fontSize: '3rem', color: '#ffd93d' }}>
|
||||||
|
<i className="fa-solid fa-chart-line"></i>
|
||||||
|
</div>
|
||||||
|
<h5 className="text-white fw-6 mb-2">Business</h5>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-6 col-md-3 text-center mb-4">
|
||||||
|
<div className="job-category-card" style={{
|
||||||
|
padding: '2rem 1rem',
|
||||||
|
background: 'rgba(255,255,255,0.05)',
|
||||||
|
borderRadius: '12px',
|
||||||
|
border: '1px solid rgba(255,255,255,0.1)',
|
||||||
|
transition: 'all 0.3s ease'
|
||||||
|
}}>
|
||||||
|
<div className="icon-wrapper mb-3" style={{ fontSize: '3rem', color: '#a78bfa' }}>
|
||||||
|
<i className="fa-solid fa-users"></i>
|
||||||
|
</div>
|
||||||
|
<h5 className="text-white fw-6 mb-2">Operations</h5>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -100,7 +100,7 @@ const JobSingle = ({ job }: JobSingleProps) => {
|
|||||||
borderRadius: '20px',
|
borderRadius: '20px',
|
||||||
fontSize: '12px',
|
fontSize: '12px',
|
||||||
fontWeight: '500',
|
fontWeight: '500',
|
||||||
textTransform: 'uppercase',
|
textTransform: 'none',
|
||||||
letterSpacing: '1px',
|
letterSpacing: '1px',
|
||||||
display: 'inline-block'
|
display: 'inline-block'
|
||||||
}}>
|
}}>
|
||||||
|
|||||||
@@ -1,56 +0,0 @@
|
|||||||
import Image from "next/legacy/image";
|
|
||||||
import one from "@/public/images/masonry/one.png";
|
|
||||||
import two from "@/public/images/masonry/two.png";
|
|
||||||
import three from "@/public/images/masonry/three.png";
|
|
||||||
import four from "@/public/images/masonry/four.png";
|
|
||||||
import five from "@/public/images/masonry/five.png";
|
|
||||||
import six from "@/public/images/masonry/six.png";
|
|
||||||
import seven from "@/public/images/masonry/seven.png";
|
|
||||||
|
|
||||||
const MasonryGallery = () => {
|
|
||||||
return (
|
|
||||||
<div className="mason pt-120 pb-120 fade-wrapper">
|
|
||||||
<div className="container">
|
|
||||||
<div className="row vertical-column-gap">
|
|
||||||
<div className="col-12 col-md-3">
|
|
||||||
<div className="mason-single fade-top">
|
|
||||||
<Image src={one} className="mh-260" alt="Image" width={300} height={260} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 col-md-4">
|
|
||||||
<div className="mason-single fade-bottom">
|
|
||||||
<Image src={two} className="mh-260" alt="Image" width={300} height={260} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 col-md-3">
|
|
||||||
<div className="mason-single fade-left">
|
|
||||||
<Image src={three} className="mh-260 botter" alt="Image" width={300} height={260} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 col-md-2">
|
|
||||||
<div className="mason-single fade-right">
|
|
||||||
<Image src={seven} className="mh-260 botter" alt="Image" width={300} height={260} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 col-md-5">
|
|
||||||
<div className="mason-single fade-top">
|
|
||||||
<Image src={five} className="mh-260" alt="Image" width={300} height={260} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 col-md-2">
|
|
||||||
<div className="mason-single fade-bottom">
|
|
||||||
<Image src={six} className="mh-260" alt="Image" width={300} height={260} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 col-md-5">
|
|
||||||
<div className="mason-single toper fade-right">
|
|
||||||
<Image src={four} className="mh-260" alt="Image" width={300} height={260} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MasonryGallery;
|
|
||||||
@@ -27,9 +27,9 @@ const Thrive = () => {
|
|||||||
Flexible workday
|
Flexible workday
|
||||||
</h4>
|
</h4>
|
||||||
<p className="cur-lg text-quinary">
|
<p className="cur-lg text-quinary">
|
||||||
Lorem ipsum dolor sit amet consectetur. Elit sit laoreet aliquam
|
We understand that productivity thrives in balance. Our flexible work arrangements
|
||||||
porttitor mattis vel feugiat eget. Nunc nunc nunc urna lorem.
|
empower you to structure your day for optimal performance while maintaining work-life
|
||||||
mattis vel feugiat eget.
|
harmony. Whether remote, hybrid, or on-site, we trust our teams to deliver excellence.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -42,9 +42,9 @@ const Thrive = () => {
|
|||||||
Transparency
|
Transparency
|
||||||
</h4>
|
</h4>
|
||||||
<p className="cur-lg text-quinary">
|
<p className="cur-lg text-quinary">
|
||||||
Lorem ipsum dolor sit amet consectetur. Elit sit laoreet aliquam
|
Open communication is the foundation of our culture. We believe in clear goal-setting,
|
||||||
porttitor mattis vel feugiat eget. Nunc nunc nunc urna lorem.
|
honest feedback, and accessible leadership. Every team member has visibility into
|
||||||
mattis vel feugiat eget.
|
company objectives, strategic decisions, and how their contributions drive enterprise success.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -55,9 +55,9 @@ const Thrive = () => {
|
|||||||
<div className="content mt-40">
|
<div className="content mt-40">
|
||||||
<h4 className="mt-8 title-anim fw-7 text-white mb-16">Support</h4>
|
<h4 className="mt-8 title-anim fw-7 text-white mb-16">Support</h4>
|
||||||
<p className="cur-lg text-quinary">
|
<p className="cur-lg text-quinary">
|
||||||
Lorem ipsum dolor sit amet consectetur. Elit sit laoreet aliquam
|
Your success is our priority. From comprehensive onboarding to continuous mentorship,
|
||||||
porttitor mattis vel feugiat eget. Nunc nunc nunc urna lorem.
|
we provide enterprise-grade resources, cutting-edge tools, and dedicated support systems.
|
||||||
mattis vel feugiat eget.
|
Our collaborative environment ensures you're never alone in tackling complex challenges.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -70,9 +70,9 @@ const Thrive = () => {
|
|||||||
Growth Skill
|
Growth Skill
|
||||||
</h4>
|
</h4>
|
||||||
<p className="cur-lg text-quinary">
|
<p className="cur-lg text-quinary">
|
||||||
Lorem ipsum dolor sit amet consectetur. Elit sit laoreet aliquam
|
Invest in your future with our comprehensive professional development programs. Access
|
||||||
porttitor mattis vel feugiat eget. Nunc nunc nunc urna lorem.
|
industry certifications, advanced training workshops, and leadership development initiatives.
|
||||||
mattis vel feugiat eget.
|
We champion continuous learning and provide clear pathways for career advancement.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,16 +1,61 @@
|
|||||||
"use client";
|
"use client";
|
||||||
import { ReactNode } from "react";
|
import { ReactNode, useEffect } from "react";
|
||||||
import Preloader from "./Preloader";
|
import Preloader from "./Preloader";
|
||||||
|
import ScrollToTop from "./ScrollToTop";
|
||||||
|
import { usePathname } from "next/navigation";
|
||||||
|
|
||||||
interface LayoutWrapperProps {
|
interface LayoutWrapperProps {
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
const LayoutWrapper = ({ children }: LayoutWrapperProps) => {
|
const LayoutWrapper = ({ children }: LayoutWrapperProps) => {
|
||||||
|
const pathname = usePathname();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Force scroll to top on every pathname change - runs FIRST
|
||||||
|
window.history.scrollRestoration = 'manual';
|
||||||
|
|
||||||
|
// Immediate scroll
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
document.documentElement.scrollTop = 0;
|
||||||
|
document.body.scrollTop = 0;
|
||||||
|
|
||||||
|
// Disable any smooth scroll temporarily
|
||||||
|
const html = document.documentElement;
|
||||||
|
const body = document.body;
|
||||||
|
const originalHtmlScroll = html.style.scrollBehavior;
|
||||||
|
const originalBodyScroll = body.style.scrollBehavior;
|
||||||
|
|
||||||
|
html.style.scrollBehavior = 'auto';
|
||||||
|
body.style.scrollBehavior = 'auto';
|
||||||
|
|
||||||
|
// Multiple forced scrolls
|
||||||
|
const scrollInterval = setInterval(() => {
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
document.documentElement.scrollTop = 0;
|
||||||
|
document.body.scrollTop = 0;
|
||||||
|
}, 10);
|
||||||
|
|
||||||
|
// Clean up after 300ms
|
||||||
|
const cleanup = setTimeout(() => {
|
||||||
|
clearInterval(scrollInterval);
|
||||||
|
html.style.scrollBehavior = originalHtmlScroll;
|
||||||
|
body.style.scrollBehavior = originalBodyScroll;
|
||||||
|
}, 300);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearInterval(scrollInterval);
|
||||||
|
clearTimeout(cleanup);
|
||||||
|
};
|
||||||
|
}, [pathname]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Preloader>
|
<>
|
||||||
{children}
|
<ScrollToTop />
|
||||||
</Preloader>
|
<Preloader>
|
||||||
|
{children}
|
||||||
|
</Preloader>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
405
gnx-react/components/shared/layout/Preloader.css
Normal file
405
gnx-react/components/shared/layout/Preloader.css
Normal file
@@ -0,0 +1,405 @@
|
|||||||
|
/* Enterprise Preloader Overlay */
|
||||||
|
.gnx-preloader-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 99999 !important;
|
||||||
|
animation: fadeIn 0.4s ease-in;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Geometric Background Pattern */
|
||||||
|
.gnx-preloader-bg-pattern {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image:
|
||||||
|
linear-gradient(rgba(148, 163, 184, 0.03) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(148, 163, 184, 0.03) 1px, transparent 1px);
|
||||||
|
background-size: 50px 50px;
|
||||||
|
animation: patternMove 20s linear infinite;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-preloader-bg-pattern::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 600px;
|
||||||
|
height: 600px;
|
||||||
|
background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
|
||||||
|
animation: pulse 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-preloader-container {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
padding: 3rem;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Professional Logo Styling */
|
||||||
|
.gnx-preloader-logo {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-logo-wrapper {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 2rem;
|
||||||
|
background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.8) 100%);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: visible;
|
||||||
|
border: 1px solid rgba(148, 163, 184, 0.2);
|
||||||
|
box-shadow:
|
||||||
|
0 20px 60px rgba(0, 0, 0, 0.5),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-logo-border {
|
||||||
|
position: absolute;
|
||||||
|
top: -2px;
|
||||||
|
left: -2px;
|
||||||
|
right: -2px;
|
||||||
|
bottom: -2px;
|
||||||
|
background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
|
||||||
|
border-radius: 22px;
|
||||||
|
opacity: 0.5;
|
||||||
|
z-index: -1;
|
||||||
|
animation: borderGlow 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-logo-image {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
filter: brightness(1.2) contrast(1.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Enterprise Branding */
|
||||||
|
.gnx-enterprise-brand {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-brand-title {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #f1f5f9;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
margin: 0;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||||||
|
text-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-brand-subtitle {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #94a3b8;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Professional Progress Container */
|
||||||
|
.gnx-progress-container {
|
||||||
|
width: 320px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-progress-bar {
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background: rgba(148, 163, 184, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-progress-shine {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent,
|
||||||
|
rgba(255, 255, 255, 0.4),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
animation: progressShine 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-progress-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-progress-text {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #94a3b8;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-progress-percentage {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #f1f5f9;
|
||||||
|
font-weight: 600;
|
||||||
|
font-family: 'SF Mono', 'Courier New', monospace;
|
||||||
|
min-width: 45px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Professional Loading Indicator */
|
||||||
|
.gnx-loading-indicator {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-spinner {
|
||||||
|
position: relative;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-spinner-ring {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
border-top-color: #3b82f6;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spinRing 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-spinner-ring:nth-child(1) {
|
||||||
|
border-top-color: #3b82f6;
|
||||||
|
animation-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-spinner-ring:nth-child(2) {
|
||||||
|
border-top-color: #8b5cf6;
|
||||||
|
animation-delay: 0.2s;
|
||||||
|
width: 75%;
|
||||||
|
height: 75%;
|
||||||
|
top: 12.5%;
|
||||||
|
left: 12.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-spinner-ring:nth-child(3) {
|
||||||
|
border-top-color: #ec4899;
|
||||||
|
animation-delay: 0.4s;
|
||||||
|
width: 50%;
|
||||||
|
height: 50%;
|
||||||
|
top: 25%;
|
||||||
|
left: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Corporate Footer */
|
||||||
|
.gnx-preloader-footer {
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding-top: 2rem;
|
||||||
|
border-top: 1px solid rgba(148, 163, 184, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-footer-text {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: #64748b;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
margin: 0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Content visibility */
|
||||||
|
.gnx-content-hidden {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
left: -9999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-content-visible {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
animation: contentFadeIn 0.5s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Enterprise Animations */
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
backdrop-filter: blur(0px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes contentFadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes patternMove {
|
||||||
|
0% {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(50px, 50px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 0.3;
|
||||||
|
transform: translate(-50%, -50%) scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
transform: translate(-50%, -50%) scale(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes borderGlow {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 0.3;
|
||||||
|
filter: blur(10px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.6;
|
||||||
|
filter: blur(15px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes progressShine {
|
||||||
|
0% {
|
||||||
|
left: -100%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spinRing {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.gnx-preloader-container {
|
||||||
|
gap: 1.5rem;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-logo-wrapper {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-logo-image {
|
||||||
|
width: 75px !important;
|
||||||
|
height: 56px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-brand-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-brand-subtitle {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-progress-container {
|
||||||
|
width: 260px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-spinner {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.gnx-preloader-container {
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-logo-wrapper {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-logo-image {
|
||||||
|
width: 60px !important;
|
||||||
|
height: 45px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-brand-title {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-brand-subtitle {
|
||||||
|
font-size: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-progress-container {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-spinner {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnx-footer-text {
|
||||||
|
font-size: 0.625rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@@ -2,6 +2,7 @@
|
|||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { usePathname } from "next/navigation";
|
import { usePathname } from "next/navigation";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
|
import "./Preloader.css";
|
||||||
|
|
||||||
interface PreloaderProps {
|
interface PreloaderProps {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
@@ -9,377 +10,140 @@ interface PreloaderProps {
|
|||||||
|
|
||||||
const Preloader = ({ children }: PreloaderProps) => {
|
const Preloader = ({ children }: PreloaderProps) => {
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
const [isMounted, setIsMounted] = useState(false);
|
||||||
const [progress, setProgress] = useState(0);
|
const [progress, setProgress] = useState(0);
|
||||||
const [currentPath, setCurrentPath] = useState("");
|
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
|
|
||||||
// Debug mode - set to true to see console logs
|
// Initial mount - show preloader on first load
|
||||||
const DEBUG = false;
|
|
||||||
|
|
||||||
// Skip preloader for faster development/testing (set to true to disable preloader)
|
|
||||||
const SKIP_PRELOADER = false;
|
|
||||||
|
|
||||||
// Fast mode - set to true for even faster loading (200ms total)
|
|
||||||
const FAST_MODE = true;
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Only show preloader if path has changed or it's initial load
|
setIsMounted(true);
|
||||||
if (currentPath !== pathname) {
|
setIsLoading(true);
|
||||||
if (DEBUG) console.log('Preloader: Starting transition from', currentPath, 'to', pathname);
|
setProgress(0);
|
||||||
setIsLoading(true);
|
|
||||||
setProgress(0);
|
|
||||||
|
|
||||||
// Simulate loading progress - faster and more responsive
|
// Simulate loading progress
|
||||||
const progressInterval = setInterval(() => {
|
const progressInterval = setInterval(() => {
|
||||||
setProgress((prev) => {
|
setProgress((prev) => {
|
||||||
if (prev >= 85) {
|
if (prev >= 90) {
|
||||||
clearInterval(progressInterval);
|
clearInterval(progressInterval);
|
||||||
return 85;
|
return 90;
|
||||||
}
|
}
|
||||||
return prev + Math.random() * 25 + 10; // Faster progress increments
|
return prev + Math.random() * 15 + 5;
|
||||||
});
|
});
|
||||||
}, 50); // Reduced interval from 100ms to 50ms for smoother animation
|
}, 50);
|
||||||
|
|
||||||
// Complete loading much faster - adjust timing based on FAST_MODE
|
// Complete loading after minimum duration
|
||||||
const loadingDuration = FAST_MODE ? 200 : 400;
|
const completeTimer = setTimeout(() => {
|
||||||
const fadeOutDuration = FAST_MODE ? 50 : 100;
|
setProgress(100);
|
||||||
|
setTimeout(() => {
|
||||||
const completeTimer = setTimeout(() => {
|
|
||||||
setProgress(100);
|
|
||||||
setTimeout(() => {
|
|
||||||
if (DEBUG) console.log('Preloader: Transition complete');
|
|
||||||
setIsLoading(false);
|
|
||||||
setCurrentPath(pathname);
|
|
||||||
}, fadeOutDuration);
|
|
||||||
}, loadingDuration);
|
|
||||||
|
|
||||||
// Fallback: Force complete after reasonable time
|
|
||||||
const fallbackDuration = FAST_MODE ? 800 : 1500;
|
|
||||||
const fallbackTimer = setTimeout(() => {
|
|
||||||
if (DEBUG) console.log('Preloader: Fallback triggered - force completing');
|
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
setCurrentPath(pathname);
|
}, 200);
|
||||||
setProgress(100);
|
}, 600);
|
||||||
}, fallbackDuration);
|
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
clearInterval(progressInterval);
|
clearInterval(progressInterval);
|
||||||
clearTimeout(completeTimer);
|
clearTimeout(completeTimer);
|
||||||
clearTimeout(fallbackTimer);
|
};
|
||||||
};
|
}, []);
|
||||||
}
|
|
||||||
}, [pathname, currentPath, DEBUG, FAST_MODE]);
|
|
||||||
|
|
||||||
// Skip preloader entirely if SKIP_PRELOADER is true
|
// Handle route changes
|
||||||
if (SKIP_PRELOADER) {
|
useEffect(() => {
|
||||||
return <>{children}</>;
|
if (!isMounted) return;
|
||||||
}
|
|
||||||
|
|
||||||
// Don't show preloader if not loading
|
// Show preloader on route change
|
||||||
if (!isLoading) {
|
setIsLoading(true);
|
||||||
return <>{children}</>;
|
setProgress(0);
|
||||||
}
|
|
||||||
|
// Simulate loading progress
|
||||||
|
const progressInterval = setInterval(() => {
|
||||||
|
setProgress((prev) => {
|
||||||
|
if (prev >= 90) {
|
||||||
|
clearInterval(progressInterval);
|
||||||
|
return 90;
|
||||||
|
}
|
||||||
|
return prev + Math.random() * 20 + 10;
|
||||||
|
});
|
||||||
|
}, 40);
|
||||||
|
|
||||||
|
// Complete loading
|
||||||
|
const completeTimer = setTimeout(() => {
|
||||||
|
setProgress(100);
|
||||||
|
setTimeout(() => {
|
||||||
|
setIsLoading(false);
|
||||||
|
}, 150);
|
||||||
|
}, 400);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearInterval(progressInterval);
|
||||||
|
clearTimeout(completeTimer);
|
||||||
|
};
|
||||||
|
}, [pathname, isMounted]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="preloader-overlay">
|
{isLoading && (
|
||||||
<div className="preloader-container">
|
<div className="gnx-preloader-overlay">
|
||||||
{/* Logo with shine effect */}
|
{/* Geometric background pattern */}
|
||||||
<div className="preloader-logo">
|
<div className="gnx-preloader-bg-pattern"></div>
|
||||||
<div className="logo-wrapper">
|
|
||||||
<Image
|
<div className="gnx-preloader-container">
|
||||||
src="/images/logo.png"
|
{/* Logo with professional wrapper */}
|
||||||
alt="GNX Logo"
|
<div className="gnx-preloader-logo">
|
||||||
width={80}
|
<div className="gnx-logo-wrapper">
|
||||||
height={60}
|
<div className="gnx-logo-border"></div>
|
||||||
className="logo-image"
|
<Image
|
||||||
priority
|
src="/images/logo.png"
|
||||||
/>
|
alt="GNX Logo"
|
||||||
<div className="shine-effect"></div>
|
width={100}
|
||||||
|
height={75}
|
||||||
|
className="gnx-logo-image"
|
||||||
|
priority
|
||||||
|
unoptimized
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Enterprise branding */}
|
||||||
|
<div className="gnx-enterprise-brand">
|
||||||
|
<h1 className="gnx-brand-title">GNX Enterprise</h1>
|
||||||
|
<p className="gnx-brand-subtitle">Digital Transformation Solutions</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Professional progress indicator */}
|
||||||
|
<div className="gnx-progress-container">
|
||||||
|
<div className="gnx-progress-bar">
|
||||||
|
<div
|
||||||
|
className="gnx-progress-fill"
|
||||||
|
style={{ width: `${progress}%` }}
|
||||||
|
>
|
||||||
|
<div className="gnx-progress-shine"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="gnx-progress-info">
|
||||||
|
<span className="gnx-progress-text">Loading</span>
|
||||||
|
<span className="gnx-progress-percentage">{Math.round(progress)}%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Professional loading indicator */}
|
||||||
|
<div className="gnx-loading-indicator">
|
||||||
|
<div className="gnx-spinner">
|
||||||
|
<div className="gnx-spinner-ring"></div>
|
||||||
|
<div className="gnx-spinner-ring"></div>
|
||||||
|
<div className="gnx-spinner-ring"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Corporate footer */}
|
||||||
|
<div className="gnx-preloader-footer">
|
||||||
|
<p className="gnx-footer-text">Powered by Advanced Technology</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Progress bar */}
|
|
||||||
<div className="progress-container">
|
|
||||||
<div className="progress-bar">
|
|
||||||
<div
|
|
||||||
className="progress-fill"
|
|
||||||
style={{ width: `${progress}%` }}
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<div className="progress-text">{Math.round(progress)}%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Loading text */}
|
|
||||||
<div className="loading-text">
|
|
||||||
<span className="loading-dots">
|
|
||||||
<span>.</span>
|
|
||||||
<span>.</span>
|
|
||||||
<span>.</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Enterprise tagline */}
|
<div className={isLoading ? "gnx-content-hidden" : "gnx-content-visible"}>
|
||||||
<div className="enterprise-tagline">
|
{children}
|
||||||
<span>Enterprise Solutions</span>
|
|
||||||
<span>Excellence in Every Project</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style jsx>{`
|
|
||||||
.preloader-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 9999;
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.preloader-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preloader-logo {
|
|
||||||
position: relative;
|
|
||||||
animation: logoFloat 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-wrapper {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 1.5rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
overflow: hidden;
|
|
||||||
transition: all 0.2s ease; /* Faster transitions */
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-image {
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
filter: brightness(1.1);
|
|
||||||
transition: all 0.2s ease; /* Faster transitions */
|
|
||||||
}
|
|
||||||
|
|
||||||
.shine-effect {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: -100%;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
transparent,
|
|
||||||
rgba(255, 255, 255, 0.4),
|
|
||||||
transparent
|
|
||||||
);
|
|
||||||
animation: shine 2s infinite;
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-container {
|
|
||||||
width: 200px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
width: 100%;
|
|
||||||
height: 3px;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: 2px;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-fill {
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(90deg, #4f46e5, #7c3aed, #ec4899);
|
|
||||||
border-radius: 2px;
|
|
||||||
transition: width 0.2s ease; /* Faster progress bar animation */
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-fill::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
transparent,
|
|
||||||
rgba(255, 255, 255, 0.6),
|
|
||||||
transparent
|
|
||||||
);
|
|
||||||
animation: progressShine 1.5s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-text {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: rgba(255, 255, 255, 0.7);
|
|
||||||
font-weight: 500;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-text {
|
|
||||||
color: rgba(255, 255, 255, 0.6);
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 400;
|
|
||||||
letter-spacing: 0.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-dots {
|
|
||||||
display: inline-flex;
|
|
||||||
gap: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-dots span {
|
|
||||||
animation: dotPulse 1.4s infinite ease-in-out;
|
|
||||||
animation-fill-mode: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-dots span:nth-child(1) {
|
|
||||||
animation-delay: -0.32s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-dots span:nth-child(2) {
|
|
||||||
animation-delay: -0.16s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-dots span:nth-child(3) {
|
|
||||||
animation-delay: 0s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.enterprise-tagline {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.25rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.enterprise-tagline span {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: rgba(255, 255, 255, 0.5);
|
|
||||||
font-weight: 300;
|
|
||||||
letter-spacing: 0.15em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
animation: fadeInUp 0.8s ease-out 0.5s both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.enterprise-tagline span:first-child {
|
|
||||||
animation-delay: 0.7s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.enterprise-tagline span:last-child {
|
|
||||||
animation-delay: 0.9s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes logoFloat {
|
|
||||||
0%, 100% {
|
|
||||||
transform: translateY(0px);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: translateY(-10px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes shine {
|
|
||||||
0% {
|
|
||||||
left: -100%;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
left: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes progressShine {
|
|
||||||
0% {
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes dotPulse {
|
|
||||||
0%, 80%, 100% {
|
|
||||||
opacity: 0.3;
|
|
||||||
transform: scale(0.8);
|
|
||||||
}
|
|
||||||
40% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeInUp {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(20px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive adjustments */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.preloader-container {
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-wrapper {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-image {
|
|
||||||
width: 60px;
|
|
||||||
height: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-container {
|
|
||||||
width: 150px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.preloader-container {
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-wrapper {
|
|
||||||
padding: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-image {
|
|
||||||
width: 50px;
|
|
||||||
height: 37px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-container {
|
|
||||||
width: 120px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,106 +0,0 @@
|
|||||||
# Preloader Component Documentation
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
The Preloader component provides a sophisticated, enterprise-grade loading experience for the GNX React application. It features a compact design with the company logo, shine effects, and smooth animations that activate during page transitions.
|
|
||||||
|
|
||||||
## Features
|
|
||||||
|
|
||||||
### 🎨 Enterprise Design
|
|
||||||
- **Compact Layout**: Minimal, professional design that doesn't overwhelm users
|
|
||||||
- **Company Logo**: Features the GNX logo with floating animation
|
|
||||||
- **Shine Effect**: Animated shine effect that sweeps across the logo periodically
|
|
||||||
- **Dark Theme**: Professional dark gradient background with subtle transparency
|
|
||||||
|
|
||||||
### ⚡ Smart Loading Logic
|
|
||||||
- **Initial Load**: Shows for 1.5 seconds on first page load
|
|
||||||
- **Page Transitions**: Activates automatically when navigating between pages
|
|
||||||
- **Progress Bar**: Realistic loading progress with gradient colors
|
|
||||||
- **Smooth Transitions**: Fade-in/out animations for seamless user experience
|
|
||||||
|
|
||||||
### 📱 Responsive Design
|
|
||||||
- **Mobile Optimized**: Scales appropriately on all device sizes
|
|
||||||
- **Touch Friendly**: Optimized for mobile interactions
|
|
||||||
- **Performance**: Lightweight animations that don't impact performance
|
|
||||||
|
|
||||||
## Components
|
|
||||||
|
|
||||||
### 1. Preloader.tsx
|
|
||||||
Main preloader component that handles the loading UI and animations.
|
|
||||||
|
|
||||||
**Key Features:**
|
|
||||||
- Logo with shine effect animation
|
|
||||||
- Progress bar with gradient fill
|
|
||||||
- Loading dots animation
|
|
||||||
- Enterprise tagline
|
|
||||||
- Responsive design
|
|
||||||
|
|
||||||
### 2. LayoutWrapper.tsx
|
|
||||||
Wrapper component that integrates the preloader with the main layout.
|
|
||||||
|
|
||||||
### 3. usePageTransition.ts
|
|
||||||
Custom hook that manages page transition states and progress.
|
|
||||||
|
|
||||||
**Hook Methods:**
|
|
||||||
- `isTransitioning`: Boolean indicating if a transition is active
|
|
||||||
- `progress`: Current loading progress (0-100)
|
|
||||||
- `startTransition()`: Initiates a new page transition
|
|
||||||
- `updateProgress()`: Updates the loading progress
|
|
||||||
- `completeTransition()`: Marks transition as complete
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
The preloader is automatically integrated into the main layout and requires no additional setup. It will:
|
|
||||||
|
|
||||||
1. **Show on initial page load** for 1.5 seconds
|
|
||||||
2. **Activate on page navigation** with realistic loading simulation
|
|
||||||
3. **Display progress** with animated progress bar
|
|
||||||
4. **Hide smoothly** when loading is complete
|
|
||||||
|
|
||||||
## Customization
|
|
||||||
|
|
||||||
### Logo
|
|
||||||
To change the logo, update the image path in the Preloader component:
|
|
||||||
```tsx
|
|
||||||
<Image
|
|
||||||
src="/images/logo.png" // Update this path
|
|
||||||
alt="GNX Logo"
|
|
||||||
width={80}
|
|
||||||
height={60}
|
|
||||||
className="logo-image"
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Colors
|
|
||||||
The preloader uses CSS custom properties that can be customized:
|
|
||||||
- Background gradient colors
|
|
||||||
- Progress bar gradient
|
|
||||||
- Text colors and opacity
|
|
||||||
|
|
||||||
### Timing
|
|
||||||
Adjust timing in the usePageTransition hook:
|
|
||||||
- Initial load duration: 1500ms
|
|
||||||
- Transition duration: 600-1000ms (randomized)
|
|
||||||
- Progress update interval: 100ms
|
|
||||||
|
|
||||||
## Performance Considerations
|
|
||||||
|
|
||||||
- **Optimized Animations**: Uses CSS transforms and opacity for smooth performance
|
|
||||||
- **Minimal DOM**: Lightweight component structure
|
|
||||||
- **Smart Loading**: Only shows when necessary (transitions)
|
|
||||||
- **Memory Efficient**: Proper cleanup of timers and intervals
|
|
||||||
|
|
||||||
## Browser Support
|
|
||||||
|
|
||||||
- **Modern Browsers**: Full support for Chrome, Firefox, Safari, Edge
|
|
||||||
- **Mobile Browsers**: Optimized for iOS Safari and Chrome Mobile
|
|
||||||
- **Fallbacks**: Graceful degradation for older browsers
|
|
||||||
|
|
||||||
## Future Enhancements
|
|
||||||
|
|
||||||
Potential improvements for future versions:
|
|
||||||
- Custom loading messages per page
|
|
||||||
- Brand-specific color themes
|
|
||||||
- Loading state indicators for API calls
|
|
||||||
- Accessibility improvements (reduced motion support)
|
|
||||||
- Analytics integration for loading performance
|
|
||||||
40
gnx-react/components/shared/layout/ScrollToTop.tsx
Normal file
40
gnx-react/components/shared/layout/ScrollToTop.tsx
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
"use client";
|
||||||
|
import { useEffect } from "react";
|
||||||
|
import { usePathname } from "next/navigation";
|
||||||
|
|
||||||
|
const ScrollToTop = () => {
|
||||||
|
const pathname = usePathname();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Aggressive scroll to top - run immediately and synchronously
|
||||||
|
const scrollToTop = () => {
|
||||||
|
window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
document.documentElement.scrollTop = 0;
|
||||||
|
document.body.scrollTop = 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 1. Immediate execution
|
||||||
|
scrollToTop();
|
||||||
|
|
||||||
|
// 2. After microtask
|
||||||
|
Promise.resolve().then(scrollToTop);
|
||||||
|
|
||||||
|
// 3. After next frame
|
||||||
|
requestAnimationFrame(scrollToTop);
|
||||||
|
|
||||||
|
// 4. Multiple delayed attempts to override any smooth scroll libraries
|
||||||
|
const timeouts = [0, 10, 50, 100, 150, 200].map(delay =>
|
||||||
|
setTimeout(scrollToTop, delay)
|
||||||
|
);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
timeouts.forEach(clearTimeout);
|
||||||
|
};
|
||||||
|
}, [pathname]);
|
||||||
|
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ScrollToTop;
|
||||||
|
|
||||||
@@ -1,19 +1,106 @@
|
|||||||
"use client";
|
"use client";
|
||||||
import { useEffect } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
import { gsap } from "gsap";
|
import { gsap } from "gsap";
|
||||||
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
|
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
|
||||||
import Lenis from "lenis";
|
import Lenis from "lenis";
|
||||||
|
import { usePathname } from "next/navigation";
|
||||||
|
|
||||||
const SmoothScroll = () => {
|
const SmoothScroll = () => {
|
||||||
|
const lenisRef = useRef<Lenis | null>(null);
|
||||||
|
const pathname = usePathname();
|
||||||
|
const [isNavigating, setIsNavigating] = useState(false);
|
||||||
|
|
||||||
|
// Handle pathname changes - PRIORITY 1
|
||||||
|
useEffect(() => {
|
||||||
|
setIsNavigating(true);
|
||||||
|
|
||||||
|
// Stop Lenis completely
|
||||||
|
if (lenisRef.current) {
|
||||||
|
lenisRef.current.stop();
|
||||||
|
lenisRef.current.scrollTo(0, { immediate: true, force: true, lock: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Force scroll to top with all methods
|
||||||
|
window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
document.documentElement.scrollTop = 0;
|
||||||
|
document.body.scrollTop = 0;
|
||||||
|
|
||||||
|
// Keep forcing scroll for a brief period
|
||||||
|
const forceScroll = () => {
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
document.documentElement.scrollTop = 0;
|
||||||
|
document.body.scrollTop = 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Force scroll every 16ms (one frame) for 200ms
|
||||||
|
const intervalId = setInterval(forceScroll, 16);
|
||||||
|
|
||||||
|
// After navigation is settled, restart Lenis
|
||||||
|
const restartTimeout = setTimeout(() => {
|
||||||
|
clearInterval(intervalId);
|
||||||
|
|
||||||
|
if (lenisRef.current) {
|
||||||
|
lenisRef.current.scrollTo(0, { immediate: true, force: true });
|
||||||
|
lenisRef.current.start();
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsNavigating(false);
|
||||||
|
|
||||||
|
// Final scroll enforcement
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
document.documentElement.scrollTop = 0;
|
||||||
|
document.body.scrollTop = 0;
|
||||||
|
}, 200);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearInterval(intervalId);
|
||||||
|
clearTimeout(restartTimeout);
|
||||||
|
};
|
||||||
|
}, [pathname]);
|
||||||
|
|
||||||
|
// Initialize Lenis - PRIORITY 2
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
gsap.registerPlugin(ScrollTrigger);
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
const lenis = new Lenis();
|
|
||||||
gsap.ticker.add((time) => {
|
const lenis = new Lenis({
|
||||||
lenis.raf(time * 350);
|
duration: 1.2,
|
||||||
|
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
|
||||||
|
orientation: 'vertical',
|
||||||
|
gestureOrientation: 'vertical',
|
||||||
|
smoothWheel: true,
|
||||||
|
wheelMultiplier: 1,
|
||||||
|
smoothTouch: false,
|
||||||
|
touchMultiplier: 2,
|
||||||
|
infinite: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
lenisRef.current = lenis;
|
||||||
|
|
||||||
|
// Force initial scroll to top
|
||||||
|
lenis.scrollTo(0, { immediate: true, force: true });
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
|
||||||
|
// Connect to GSAP ticker
|
||||||
|
const tickerCallback = (time: number) => {
|
||||||
|
if (!isNavigating) {
|
||||||
|
lenis.raf(time * 350);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
gsap.ticker.add(tickerCallback);
|
||||||
gsap.ticker.lagSmoothing(0);
|
gsap.ticker.lagSmoothing(0);
|
||||||
ScrollTrigger.update();
|
|
||||||
|
// Sync with ScrollTrigger
|
||||||
|
lenis.on('scroll', ScrollTrigger.update);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
lenis.destroy();
|
||||||
|
gsap.ticker.remove(tickerCallback);
|
||||||
|
lenisRef.current = null;
|
||||||
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -4,9 +4,13 @@ import Image from "next/legacy/image";
|
|||||||
import location from "@/public/images/footer/location.png";
|
import location from "@/public/images/footer/location.png";
|
||||||
import phone from "@/public/images/footer/phone.png";
|
import phone from "@/public/images/footer/phone.png";
|
||||||
import gmail from "@/public/images/footer/gmail.png";
|
import gmail from "@/public/images/footer/gmail.png";
|
||||||
|
import { useNavigationServices } from "@/lib/hooks/useServices";
|
||||||
|
import { useJobs } from "@/lib/hooks/useCareer";
|
||||||
|
|
||||||
const Footer = () => {
|
const Footer = () => {
|
||||||
const currentYear = new Date().getFullYear();
|
const currentYear = new Date().getFullYear();
|
||||||
|
const { services: dynamicServices, loading: servicesLoading } = useNavigationServices();
|
||||||
|
const { jobs, loading: jobsLoading } = useJobs();
|
||||||
|
|
||||||
// Static header data
|
// Static header data
|
||||||
const headerData = {
|
const headerData = {
|
||||||
@@ -96,36 +100,54 @@ const Footer = () => {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 col-lg-2 col-md-6">
|
|
||||||
<div className="footer-section">
|
|
||||||
<h6 className="text-white fm fw-6 mb-24">Solutions</h6>
|
|
||||||
<ul className="footer-links">
|
|
||||||
<li><Link href="services">Incident Management Software</Link></li>
|
|
||||||
<li><Link href="services">Custom Software Development</Link></li>
|
|
||||||
<li><Link href="services">System Integrations & APIs</Link></li>
|
|
||||||
<li><Link href="services">Data Replication</Link></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 col-lg-2 col-md-6">
|
|
||||||
<div className="footer-section">
|
|
||||||
<h6 className="text-white fm fw-6 mb-24">Resources</h6>
|
|
||||||
<ul className="footer-links">
|
|
||||||
<li><Link href="/insights">Software Insights</Link></li>
|
|
||||||
<li><Link href="case-study">Development Resources</Link></li>
|
|
||||||
<li><Link href="services">API Documentation</Link></li>
|
|
||||||
<li><Link href="contact-us">Technical Support</Link></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 col-lg-2 col-md-6">
|
<div className="col-12 col-lg-2 col-md-6">
|
||||||
<div className="footer-section">
|
<div className="footer-section">
|
||||||
<h6 className="text-white fm fw-6 mb-24">Services</h6>
|
<h6 className="text-white fm fw-6 mb-24">Services</h6>
|
||||||
<ul className="footer-links">
|
<ul className="footer-links">
|
||||||
<li><Link href="services">Software Consulting</Link></li>
|
{servicesLoading ? (
|
||||||
<li><Link href="contact-us">Custom Development</Link></li>
|
<>
|
||||||
<li><Link href="case-study">API & Integration Services</Link></li>
|
<li><Link href="/services">Our Services</Link></li>
|
||||||
<li><Link href="contact-us">Data Solutions</Link></li>
|
</>
|
||||||
|
) : (
|
||||||
|
dynamicServices.slice(0, 6).map((service) => (
|
||||||
|
<li key={service.slug}>
|
||||||
|
<Link href={`/services/${service.slug}`}>
|
||||||
|
{service.title}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-12 col-lg-2 col-md-6">
|
||||||
|
<div className="footer-section">
|
||||||
|
<h6 className="text-white fm fw-6 mb-24">Latest Jobs</h6>
|
||||||
|
<ul className="footer-links">
|
||||||
|
{jobsLoading ? (
|
||||||
|
<>
|
||||||
|
<li><Link href="/career">View All Jobs</Link></li>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
jobs.slice(0, 4).map((job) => (
|
||||||
|
<li key={job.slug}>
|
||||||
|
<Link href={`/career/${job.slug}`}>
|
||||||
|
{job.title}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-12 col-lg-2 col-md-6">
|
||||||
|
<div className="footer-section">
|
||||||
|
<h6 className="text-white fm fw-6 mb-24">Support</h6>
|
||||||
|
<ul className="footer-links">
|
||||||
|
<li><Link href="/support-center">Support Center</Link></li>
|
||||||
|
<li><Link href="/policy?type=privacy">Privacy Policy</Link></li>
|
||||||
|
<li><Link href="/policy?type=terms">Terms of Use</Link></li>
|
||||||
|
<li><Link href="/policy?type=support">Support Policy</Link></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 MiB After Width: | Height: | Size: 120 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 MiB After Width: | Height: | Size: 120 KiB |
@@ -1231,7 +1231,7 @@
|
|||||||
.word {
|
.word {
|
||||||
.char {
|
.char {
|
||||||
&:nth-of-type(1) {
|
&:nth-of-type(1) {
|
||||||
text-transform: uppercase !important;
|
text-transform: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ html {
|
|||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@@ -480,7 +480,7 @@ a {
|
|||||||
.btn {
|
.btn {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
@@ -662,7 +662,7 @@ a {
|
|||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
@@ -708,7 +708,7 @@ a {
|
|||||||
.btn {
|
.btn {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ body {
|
|||||||
overflow-x: clip;
|
overflow-x: clip;
|
||||||
max-width: 100vw;
|
max-width: 100vw;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
text-transform: capitalize;
|
text-transform: none;
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width: 5px;
|
width: 5px;
|
||||||
@@ -179,7 +179,7 @@ h4,
|
|||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
font-family: var(--mont);
|
font-family: var(--mont);
|
||||||
text-transform: capitalize;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.odometer {
|
.odometer {
|
||||||
|
|||||||
@@ -72,7 +72,7 @@
|
|||||||
.metric-label {
|
.metric-label {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
color: #64748b;
|
color: #64748b;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
margin-top: 0.25rem;
|
margin-top: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
color: var(--secondary-600);
|
color: var(--secondary-600);
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-transform: capitalize;
|
text-transform: none;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
|
|
||||||
|
|||||||
@@ -25,7 +25,7 @@
|
|||||||
.btn-line {
|
.btn-line {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
font-size: 12px !important;
|
font-size: 12px !important;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|||||||
@@ -153,7 +153,7 @@
|
|||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
|
|
||||||
i {
|
i {
|
||||||
@@ -349,7 +349,7 @@
|
|||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@@ -453,7 +453,7 @@
|
|||||||
.metric-label {
|
.metric-label {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
color: var(--white) !important;
|
color: var(--white) !important;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -556,7 +556,7 @@
|
|||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.03em;
|
letter-spacing: 0.03em;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|||||||
@@ -277,7 +277,7 @@
|
|||||||
.stat-label {
|
.stat-label {
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
color: rgba(255, 255, 255, 0.7);
|
color: rgba(255, 255, 255, 0.7);
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -473,7 +473,7 @@
|
|||||||
.card-title {
|
.card-title {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
color: #64748b;
|
color: #64748b;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -638,7 +638,7 @@
|
|||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 1.2px;
|
letter-spacing: 1.2px;
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
|
|
||||||
@@ -810,7 +810,7 @@
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: rgba(255, 255, 255, 0.7);
|
color: rgba(255, 255, 255, 0.7);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 1.2px;
|
letter-spacing: 1.2px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -842,7 +842,7 @@
|
|||||||
.scroll-text {
|
.scroll-text {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1175,7 +1175,7 @@
|
|||||||
top: 40%;
|
top: 40%;
|
||||||
right: 100px;
|
right: 100px;
|
||||||
writing-mode: vertical-rl;
|
writing-mode: vertical-rl;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
line-height: 0px;
|
line-height: 0px;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
color: white;
|
color: white;
|
||||||
@@ -1366,7 +1366,7 @@
|
|||||||
top: 40%;
|
top: 40%;
|
||||||
right: 100px;
|
right: 100px;
|
||||||
writing-mode: vertical-rl;
|
writing-mode: vertical-rl;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
line-height: 0px;
|
line-height: 0px;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
color: white;
|
color: white;
|
||||||
@@ -1499,7 +1499,7 @@
|
|||||||
top: 40%;
|
top: 40%;
|
||||||
right: 100px;
|
right: 100px;
|
||||||
writing-mode: vertical-rl;
|
writing-mode: vertical-rl;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
line-height: 0px;
|
line-height: 0px;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
color: white;
|
color: white;
|
||||||
|
|||||||
@@ -17,18 +17,6 @@
|
|||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 100px;
|
|
||||||
height: 2px;
|
|
||||||
background: linear-gradient(90deg, #4a9eff, #00d4ff);
|
|
||||||
border-radius: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.enterprise-logo-container {
|
.enterprise-logo-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
@@ -188,7 +176,7 @@
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
position: relative;
|
position: relative;
|
||||||
&::after {
|
&::after {
|
||||||
@@ -219,7 +207,7 @@
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
position: relative;
|
position: relative;
|
||||||
&::after {
|
&::after {
|
||||||
@@ -388,7 +376,7 @@
|
|||||||
border-radius: 25px;
|
border-radius: 25px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
letter-spacing: 0.3px;
|
letter-spacing: 0.3px;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
|
||||||
.primary-navbar {
|
.primary-navbar {
|
||||||
padding: 20px 0px;
|
padding: 15px 0px;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -270,7 +270,7 @@
|
|||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
@@ -291,8 +291,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.logo-img {
|
.logo-img {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-height: 150px;
|
max-height: 90px;
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -405,7 +409,7 @@
|
|||||||
font-size: 5.5vw;
|
font-size: 5.5vw;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
max-width: 35vw;
|
max-width: 35vw;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
color: white;
|
color: white;
|
||||||
@@ -474,7 +478,7 @@
|
|||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-transform: capitalize;
|
text-transform: none;
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
@@ -994,7 +998,8 @@
|
|||||||
@media (max-width: 767.98px) {
|
@media (max-width: 767.98px) {
|
||||||
.tp-header {
|
.tp-header {
|
||||||
.logo-img img {
|
.logo-img img {
|
||||||
max-height: 120px;
|
max-height: 68px !important;
|
||||||
|
height: 68px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary-navbar {
|
.primary-navbar {
|
||||||
@@ -1114,7 +1119,8 @@
|
|||||||
@media (max-width: 575.98px) {
|
@media (max-width: 575.98px) {
|
||||||
.tp-header {
|
.tp-header {
|
||||||
.logo-img img {
|
.logo-img img {
|
||||||
max-height: 90px;
|
max-height: 58px !important;
|
||||||
|
height: 58px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary-navbar {
|
.primary-navbar {
|
||||||
|
|||||||
@@ -81,7 +81,7 @@
|
|||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
font-family: var(--font-family-sans);
|
font-family: var(--font-family-sans);
|
||||||
@@ -160,7 +160,7 @@
|
|||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -275,7 +275,7 @@
|
|||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
font-family: var(--font-family-sans);
|
font-family: var(--font-family-sans);
|
||||||
@@ -493,7 +493,7 @@
|
|||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
font-family: var(--font-family-sans);
|
font-family: var(--font-family-sans);
|
||||||
@@ -578,7 +578,7 @@
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@@ -138,7 +138,7 @@
|
|||||||
.author-label {
|
.author-label {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6c757d;
|
color: #6c757d;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
@@ -608,7 +608,7 @@
|
|||||||
.bio-label {
|
.bio-label {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #6c757d;
|
color: #6c757d;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|||||||
@@ -508,7 +508,7 @@
|
|||||||
margin-bottom: 0.625rem;
|
margin-bottom: 0.625rem;
|
||||||
font-size: 0.975rem;
|
font-size: 0.975rem;
|
||||||
letter-spacing: 0.2px;
|
letter-spacing: 0.2px;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
|
|
||||||
.required {
|
.required {
|
||||||
@@ -582,7 +582,7 @@
|
|||||||
font-size: 1.05rem;
|
font-size: 1.05rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
box-shadow: 0 4px 12px rgba(218, 165, 32, 0.3);
|
box-shadow: 0 4px 12px rgba(218, 165, 32, 0.3);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
@@ -754,7 +754,7 @@
|
|||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -80,7 +80,7 @@
|
|||||||
p {
|
p {
|
||||||
&:nth-last-of-type(1) {
|
&:nth-last-of-type(1) {
|
||||||
color: #ffffff80;
|
color: #ffffff80;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1801,7 +1801,7 @@
|
|||||||
|
|
||||||
.price-period {
|
.price-period {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1837,7 +1837,7 @@
|
|||||||
|
|
||||||
.stat-label {
|
.stat-label {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -2063,7 +2063,7 @@
|
|||||||
border-radius: 25px;
|
border-radius: 25px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -2122,7 +2122,7 @@
|
|||||||
border-radius: 25px;
|
border-radius: 25px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
@@ -2313,7 +2313,7 @@
|
|||||||
|
|
||||||
.price-period {
|
.price-period {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -633,7 +633,7 @@
|
|||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
font-size: var(--text-sm);
|
font-size: var(--text-sm);
|
||||||
font-weight: var(--font-weight-medium);
|
font-weight: var(--font-weight-medium);
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
@@ -728,7 +728,7 @@
|
|||||||
.highlight-label {
|
.highlight-label {
|
||||||
font-size: var(--text-sm);
|
font-size: var(--text-sm);
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -854,7 +854,7 @@
|
|||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
font-size: var(--text-sm);
|
font-size: var(--text-sm);
|
||||||
font-weight: var(--font-weight-medium);
|
font-weight: var(--font-weight-medium);
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
@@ -918,7 +918,7 @@
|
|||||||
.stat-label {
|
.stat-label {
|
||||||
font-size: var(--text-sm);
|
font-size: var(--text-sm);
|
||||||
color: var(--secondary-500);
|
color: var(--secondary-500);
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -961,7 +961,7 @@
|
|||||||
.meta-label {
|
.meta-label {
|
||||||
font-size: var(--text-sm);
|
font-size: var(--text-sm);
|
||||||
color: var(--secondary-500);
|
color: var(--secondary-500);
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1098,7 +1098,7 @@
|
|||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 4px 15px rgba(59, 130, 246, 0.3),
|
0 4px 15px rgba(59, 130, 246, 0.3),
|
||||||
@@ -1481,7 +1481,7 @@
|
|||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
font-size: var(--text-sm);
|
font-size: var(--text-sm);
|
||||||
font-weight: var(--font-weight-semibold);
|
font-weight: var(--font-weight-semibold);
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
|
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
|
||||||
}
|
}
|
||||||
@@ -1507,7 +1507,7 @@
|
|||||||
.price-period {
|
.price-period {
|
||||||
font-size: var(--text-base);
|
font-size: var(--text-base);
|
||||||
color: var(--secondary-500);
|
color: var(--secondary-500);
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1688,7 +1688,7 @@
|
|||||||
.price-label {
|
.price-label {
|
||||||
font-size: var(--text-sm);
|
font-size: var(--text-sm);
|
||||||
color: var(--secondary-500);
|
color: var(--secondary-500);
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1867,7 +1867,7 @@
|
|||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
font-size: var(--text-xs);
|
font-size: var(--text-xs);
|
||||||
font-weight: var(--font-weight-medium);
|
font-weight: var(--font-weight-medium);
|
||||||
text-transform: uppercase;
|
text-transform: none;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -254,8 +254,8 @@
|
|||||||
.text-justify { text-align: justify !important; }
|
.text-justify { text-align: justify !important; }
|
||||||
|
|
||||||
.text-lowercase { text-transform: lowercase !important; }
|
.text-lowercase { text-transform: lowercase !important; }
|
||||||
.text-uppercase { text-transform: uppercase !important; }
|
.text-uppercase { text-transform: none !important; }
|
||||||
.text-capitalize { text-transform: capitalize !important; }
|
.text-capitalize { text-transform: none !important; }
|
||||||
|
|
||||||
.text-decoration-none { text-decoration: none !important; }
|
.text-decoration-none { text-decoration: none !important; }
|
||||||
.text-decoration-underline { text-decoration: underline !important; }
|
.text-decoration-underline { text-decoration: underline !important; }
|
||||||
|
|||||||
Reference in New Issue
Block a user