GNXSOFT.COM
This commit is contained in:
Iliyan Angelov
395
gnx-react/components/pages/home/HomeBanner.tsx
Normal file
395
gnx-react/components/pages/home/HomeBanner.tsx
Normal file
@@ -0,0 +1,395 @@
|
||||
"use client";
|
||||
import Link from "next/link";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
const HomeBanner = () => {
|
||||
const [currentTextIndex, setCurrentTextIndex] = useState(0);
|
||||
const [isTransitioning, setIsTransitioning] = useState(false);
|
||||
|
||||
// Static banner slides data
|
||||
const carouselTexts = [
|
||||
{
|
||||
id: 1,
|
||||
badge: "Enterprise Solutions",
|
||||
icon: "fa-solid fa-shield-halved",
|
||||
heading: "Secure Enterprise Software",
|
||||
highlight: "Development",
|
||||
subheading: "for Modern Businesses",
|
||||
description: "We build enterprise-grade software solutions with advanced security, scalability, and 24/7 support. Transform your business with our custom development services.",
|
||||
button_text: "Explore Solutions",
|
||||
button_url: "/services",
|
||||
is_active: true,
|
||||
display_order: 1,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString()
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
badge: "API Integration",
|
||||
icon: "fa-solid fa-plug",
|
||||
heading: "Seamless API",
|
||||
highlight: "Integration",
|
||||
subheading: "& System Connectivity",
|
||||
description: "Connect all your systems with our robust API development and integration services. Enable smooth data flow and unified workflows across your organization.",
|
||||
button_text: "Learn More",
|
||||
button_url: "/services/api-development",
|
||||
is_active: true,
|
||||
display_order: 2,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString()
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
badge: "Cloud Migration",
|
||||
icon: "fa-solid fa-cloud",
|
||||
heading: "Cloud-First",
|
||||
highlight: "Solutions",
|
||||
subheading: "for Enterprise Scale",
|
||||
description: "Migrate to the cloud with confidence. Our cloud solutions provide improved scalability, security, and cost-effectiveness for your enterprise operations.",
|
||||
button_text: "Start Migration",
|
||||
button_url: "/services/cloud-solutions",
|
||||
is_active: true,
|
||||
display_order: 3,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString()
|
||||
}
|
||||
];
|
||||
|
||||
// Carousel rotation effect
|
||||
useEffect(() => {
|
||||
if (carouselTexts.length <= 1) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setIsTransitioning(true);
|
||||
|
||||
setTimeout(() => {
|
||||
setCurrentTextIndex((prevIndex) =>
|
||||
prevIndex === carouselTexts.length - 1 ? 0 : prevIndex + 1
|
||||
);
|
||||
setIsTransitioning(false);
|
||||
}, 1000); // Slightly longer for smoother transition
|
||||
}, 6000); // Increased interval for slower changes
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [carouselTexts.length]);
|
||||
|
||||
const currentText = carouselTexts[currentTextIndex];
|
||||
|
||||
if (!currentText) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="modern-banner">
|
||||
<div className="banner-background">
|
||||
<div className="gradient-orb orb-1"></div>
|
||||
<div className="gradient-orb orb-2"></div>
|
||||
<div className="gradient-orb orb-3"></div>
|
||||
|
||||
{/* Industrial Enterprise Background Elements */}
|
||||
<div className="enterprise-bg-elements">
|
||||
{/* Flying Code Elements */}
|
||||
<div className="flying-code">
|
||||
<div className="code-snippet code-1">
|
||||
<span className="code-line">const enterprise = {'{'}</span>
|
||||
<span className="code-line"> security: 'enterprise-grade',</span>
|
||||
<span className="code-line"> scalability: 'unlimited'</span>
|
||||
<span className="code-line">{'}'};</span>
|
||||
</div>
|
||||
<div className="code-snippet code-2">
|
||||
<span className="code-line">if (security === 'max') {'{'}</span>
|
||||
<span className="code-line"> deploy.enterprise();</span>
|
||||
<span className="code-line">{'}'}</span>
|
||||
</div>
|
||||
<div className="code-snippet code-3">
|
||||
<span className="code-line">class EnterpriseSoftware {'{'}</span>
|
||||
<span className="code-line"> constructor() {'{'}</span>
|
||||
<span className="code-line"> this.secure = true;</span>
|
||||
<span className="code-line"> {'}'}</span>
|
||||
<span className="code-line">{'}'}</span>
|
||||
</div>
|
||||
<div className="code-snippet code-4">
|
||||
<span className="code-line">API.authenticate({'{'}</span>
|
||||
<span className="code-line"> level: 'enterprise',</span>
|
||||
<span className="code-line"> encryption: 'AES-256'</span>
|
||||
<span className="code-line">{'}'});</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Industrial Grid */}
|
||||
<div className="industrial-grid">
|
||||
<div className="grid-line horizontal h-1"></div>
|
||||
<div className="grid-line horizontal h-2"></div>
|
||||
<div className="grid-line horizontal h-3"></div>
|
||||
<div className="grid-line horizontal h-4"></div>
|
||||
<div className="grid-line vertical v-1"></div>
|
||||
<div className="grid-line vertical v-2"></div>
|
||||
<div className="grid-line vertical v-3"></div>
|
||||
<div className="grid-line vertical v-4"></div>
|
||||
</div>
|
||||
|
||||
{/* Security Elements */}
|
||||
<div className="security-elements">
|
||||
<div className="shield shield-1">
|
||||
<i className="fa-solid fa-shield-halved"></i>
|
||||
</div>
|
||||
<div className="shield shield-2">
|
||||
<i className="fa-solid fa-lock"></i>
|
||||
</div>
|
||||
<div className="shield shield-3">
|
||||
<i className="fa-solid fa-key"></i>
|
||||
</div>
|
||||
<div className="shield shield-4">
|
||||
<i className="fa-solid fa-fingerprint"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Circuit Patterns */}
|
||||
<div className="circuit-patterns">
|
||||
<div className="circuit circuit-1">
|
||||
<div className="circuit-node"></div>
|
||||
<div className="circuit-line"></div>
|
||||
<div className="circuit-node"></div>
|
||||
</div>
|
||||
<div className="circuit circuit-2">
|
||||
<div className="circuit-node"></div>
|
||||
<div className="circuit-line"></div>
|
||||
<div className="circuit-node"></div>
|
||||
<div className="circuit-line"></div>
|
||||
<div className="circuit-node"></div>
|
||||
</div>
|
||||
<div className="circuit circuit-3">
|
||||
<div className="circuit-node"></div>
|
||||
<div className="circuit-line"></div>
|
||||
<div className="circuit-node"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Data Streams */}
|
||||
<div className="data-streams">
|
||||
<div className="stream stream-1">
|
||||
<div className="data-bit"></div>
|
||||
<div className="data-bit"></div>
|
||||
<div className="data-bit"></div>
|
||||
<div className="data-bit"></div>
|
||||
</div>
|
||||
<div className="stream stream-2">
|
||||
<div className="data-bit"></div>
|
||||
<div className="data-bit"></div>
|
||||
<div className="data-bit"></div>
|
||||
<div className="data-bit"></div>
|
||||
<div className="data-bit"></div>
|
||||
</div>
|
||||
<div className="stream stream-3">
|
||||
<div className="data-bit"></div>
|
||||
<div className="data-bit"></div>
|
||||
<div className="data-bit"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Request/Response Data */}
|
||||
<div className="request-response-data">
|
||||
<div className="api-request req-1">
|
||||
<div className="request-label">POST /api/enterprise</div>
|
||||
<div className="request-data">
|
||||
<div className="data-packet"></div>
|
||||
<div className="data-packet"></div>
|
||||
<div className="data-packet"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="api-response resp-1">
|
||||
<div className="response-label">200 OK</div>
|
||||
<div className="response-data">
|
||||
<div className="data-packet"></div>
|
||||
<div className="data-packet"></div>
|
||||
<div className="data-packet"></div>
|
||||
<div className="data-packet"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="api-request req-2">
|
||||
<div className="request-label">GET /api/analytics</div>
|
||||
<div className="request-data">
|
||||
<div className="data-packet"></div>
|
||||
<div className="data-packet"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="api-response resp-2">
|
||||
<div className="response-label">201 Created</div>
|
||||
<div className="response-data">
|
||||
<div className="data-packet"></div>
|
||||
<div className="data-packet"></div>
|
||||
<div className="data-packet"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Space Data Generation */}
|
||||
<div className="space-data-generation">
|
||||
<div className="data-cluster cluster-1">
|
||||
<div className="data-point"></div>
|
||||
<div className="data-point"></div>
|
||||
<div className="data-point"></div>
|
||||
<div className="data-point"></div>
|
||||
<div className="data-point"></div>
|
||||
<div className="data-point"></div>
|
||||
</div>
|
||||
<div className="data-cluster cluster-2">
|
||||
<div className="data-point"></div>
|
||||
<div className="data-point"></div>
|
||||
<div className="data-point"></div>
|
||||
<div className="data-point"></div>
|
||||
<div className="data-point"></div>
|
||||
</div>
|
||||
<div className="data-cluster cluster-3">
|
||||
<div className="data-point"></div>
|
||||
<div className="data-point"></div>
|
||||
<div className="data-point"></div>
|
||||
<div className="data-point"></div>
|
||||
<div className="data-point"></div>
|
||||
<div className="data-point"></div>
|
||||
<div className="data-point"></div>
|
||||
</div>
|
||||
<div className="data-cluster cluster-4">
|
||||
<div className="data-point"></div>
|
||||
<div className="data-point"></div>
|
||||
<div className="data-point"></div>
|
||||
<div className="data-point"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Database Connections */}
|
||||
<div className="database-connections">
|
||||
<div className="db-connection conn-1">
|
||||
<div className="connection-line"></div>
|
||||
<div className="db-node">
|
||||
<i className="fa-solid fa-database"></i>
|
||||
</div>
|
||||
<div className="connection-pulse"></div>
|
||||
</div>
|
||||
<div className="db-connection conn-2">
|
||||
<div className="connection-line"></div>
|
||||
<div className="db-node">
|
||||
<i className="fa-solid fa-server"></i>
|
||||
</div>
|
||||
<div className="connection-pulse"></div>
|
||||
</div>
|
||||
<div className="db-connection conn-3">
|
||||
<div className="connection-line"></div>
|
||||
<div className="db-node">
|
||||
<i className="fa-solid fa-cloud"></i>
|
||||
</div>
|
||||
<div className="connection-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Real-time Metrics */}
|
||||
<div className="real-time-metrics">
|
||||
<div className="metric metric-1">
|
||||
<div className="metric-label">API Calls/sec</div>
|
||||
<div className="metric-value">2,847</div>
|
||||
<div className="metric-bar">
|
||||
<div className="bar-fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="metric metric-2">
|
||||
<div className="metric-label">Data Processed</div>
|
||||
<div className="metric-value">15.2TB</div>
|
||||
<div className="metric-bar">
|
||||
<div className="bar-fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="metric metric-3">
|
||||
<div className="metric-label">Active Users</div>
|
||||
<div className="metric-value">45,892</div>
|
||||
<div className="metric-bar">
|
||||
<div className="bar-fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container">
|
||||
<div className="banner-content">
|
||||
<div className="content-center">
|
||||
<div className="badge-container">
|
||||
<span className="badge">
|
||||
<i className={currentText.icon}></i>
|
||||
{currentText.badge}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 className={`main-heading carousel-text ${isTransitioning ? 'fade-out' : 'fade-in'}`}>
|
||||
{currentText.heading}
|
||||
<span className="gradient-text"> {currentText.highlight}</span>
|
||||
<br />
|
||||
{currentText.subheading}
|
||||
</h1>
|
||||
|
||||
<p className={`description carousel-text ${isTransitioning ? 'fade-out' : 'fade-in'}`}>
|
||||
{currentText.description}
|
||||
</p>
|
||||
|
||||
{/* Carousel Indicators */}
|
||||
<div className="carousel-indicators">
|
||||
{carouselTexts.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
className={`indicator ${index === currentTextIndex ? 'active' : ''}`}
|
||||
onClick={() => {
|
||||
if (index !== currentTextIndex) {
|
||||
setIsTransitioning(true);
|
||||
setTimeout(() => {
|
||||
setCurrentTextIndex(index);
|
||||
setIsTransitioning(false);
|
||||
}, 1000);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="cta-section">
|
||||
<Link href={currentText.button_url || "#"} className="cta-primary">
|
||||
<span>{currentText.button_text || "Learn More"}</span>
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
<Link href="contact-us" className="cta-secondary">
|
||||
<i className="fa-solid fa-phone"></i>
|
||||
<span>Contact Sales</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="trust-indicators">
|
||||
<div className="trust-item">
|
||||
<div className="trust-number">30+</div>
|
||||
<div className="trust-label">Enterprise Clients</div>
|
||||
</div>
|
||||
<div className="trust-item">
|
||||
<div className="trust-number">99.9%</div>
|
||||
<div className="trust-label">Uptime SLA</div>
|
||||
</div>
|
||||
<div className="trust-item">
|
||||
<div className="trust-number">24/7</div>
|
||||
<div className="trust-label">Enterprise Support</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div className="scroll-indicator" onClick={() => window.scrollTo({ top: window.innerHeight, behavior: 'smooth' })}>
|
||||
<div className="scroll-text">Scroll to explore</div>
|
||||
<div className="scroll-arrow">
|
||||
<i className="fa-solid fa-chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomeBanner;
|
||||
65
gnx-react/components/pages/home/HomeInitAnimations.tsx
Normal file
65
gnx-react/components/pages/home/HomeInitAnimations.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
"use client";
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
const SmoothScroll = dynamic(() => import("../../shared/layout/animations/SmoothScroll"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const ParallaxImage = dynamic(() => import("../../shared/layout/animations/ParallaxImage"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const FadeImageBottom = dynamic(() => import("../../shared/layout/animations/FadeImageBottom"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const ButtonHoverAnimation = dynamic(
|
||||
() => import("../../shared/layout/animations/ButtonHoverAnimation"),
|
||||
{
|
||||
ssr: false,
|
||||
}
|
||||
);
|
||||
|
||||
const VanillaTiltHover = dynamic(
|
||||
() => import("../../shared/layout/animations/VanillaTiltHover"),
|
||||
{
|
||||
ssr: false,
|
||||
}
|
||||
);
|
||||
|
||||
const SplitTextAnimations = dynamic(
|
||||
() => import("../../shared/layout/animations/SplitTextAnimations"),
|
||||
{
|
||||
ssr: false,
|
||||
}
|
||||
);
|
||||
|
||||
const ScrollToElement = dynamic(() => import("../../shared/layout/animations/ScrollToElement"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const AppearDown = dynamic(() => import("../../shared/layout/animations/AppearDown"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const FadeAnimations = dynamic(() => import("../../shared/layout/animations/FadeAnimations"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const HomeInitAnimations = () => {
|
||||
return (
|
||||
<>
|
||||
<SmoothScroll />
|
||||
<ParallaxImage />
|
||||
<FadeImageBottom />
|
||||
<ButtonHoverAnimation />
|
||||
<VanillaTiltHover />
|
||||
<SplitTextAnimations />
|
||||
<ScrollToElement />
|
||||
<AppearDown />
|
||||
<FadeAnimations />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomeInitAnimations;
|
||||
434
gnx-react/components/pages/home/HomeLatestPost.tsx
Normal file
434
gnx-react/components/pages/home/HomeLatestPost.tsx
Normal file
@@ -0,0 +1,434 @@
|
||||
"use client";
|
||||
import Image from "next/legacy/image";
|
||||
import Link from "next/link";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Autoplay } from "swiper/modules";
|
||||
import "swiper/swiper-bundle.css";
|
||||
import one from "@/public/images/blog/related-one.png";
|
||||
import two from "@/public/images/blog/related-two.png";
|
||||
import three from "@/public/images/blog/related-three.png";
|
||||
import four from "@/public/images/blog/related-four.png";
|
||||
|
||||
const HomeLatestPost = () => {
|
||||
return (
|
||||
<section className="tp-latest-post pt-120 pb-120 bg-quinary">
|
||||
<div className="container">
|
||||
<div className="row vertical-column-gap align-items-center">
|
||||
<div className="col-12 col-lg-7">
|
||||
<div className="tp-lp-title text-center text-lg-start">
|
||||
<h2 className="mt-8 fw-7 text-secondary title-anim">
|
||||
Related posts
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-lg-5">
|
||||
<div className="tp-lp-cta text-center text-lg-end">
|
||||
<Link href="blog" className="btn-line text-uppercase">
|
||||
See All Posts
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="tp-lp-slider-wrapper mt-60">
|
||||
<div className="tp-lp-slider-wrapper">
|
||||
<Swiper
|
||||
slidesPerView={"auto"}
|
||||
spaceBetween={24}
|
||||
slidesPerGroup={1}
|
||||
freeMode={true}
|
||||
speed={1200}
|
||||
loop={true}
|
||||
roundLengths={true}
|
||||
modules={[Autoplay]}
|
||||
autoplay={{
|
||||
delay: 5000,
|
||||
disableOnInteraction: false,
|
||||
pauseOnMouseEnter: true,
|
||||
}}
|
||||
className="tp-lp-slider"
|
||||
>
|
||||
<SwiperSlide>
|
||||
<div className="tp-lp-slider__single topy-tilt">
|
||||
<div className="thumb mb-24">
|
||||
<Link href="blog-single" className="w-100 overflow-hidden">
|
||||
<Image
|
||||
src={one}
|
||||
width={400}
|
||||
height={220}
|
||||
className="w-100 mh-220"
|
||||
alt="Image"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="tp-lp-post__meta mb-24 mt-8">
|
||||
<p className="author text-xs text-tertiary">
|
||||
Denial Lio
|
||||
</p>
|
||||
<span></span>
|
||||
<p className="date text-xs text-tertiary">
|
||||
18 Dec 2022
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mt-8 fw-5 text-secondary">
|
||||
<Link href="blog-single">
|
||||
Tackling data of annotation problems in healthcare
|
||||
</Link>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className="tp-lp-slider__single topy-tilt">
|
||||
<div className="thumb mb-24">
|
||||
<Link href="blog-single" className="w-100 overflow-hidden">
|
||||
<Image
|
||||
src={two}
|
||||
width={400}
|
||||
height={220}
|
||||
className="w-100 mh-220"
|
||||
alt="Image"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="tp-lp-post__meta mb-24 mt-8">
|
||||
<p className="author text-xs text-tertiary">
|
||||
Denial Lio
|
||||
</p>
|
||||
<span></span>
|
||||
<p className="date text-xs text-tertiary">
|
||||
18 Dec 2022
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mt-8 fw-5 text-secondary">
|
||||
<Link href="blog-single">
|
||||
Tackling data of annotation problems in healthcare
|
||||
</Link>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className="tp-lp-slider__single topy-tilt">
|
||||
<div className="thumb mb-24">
|
||||
<Link href="blog-single" className="w-100 overflow-hidden">
|
||||
<Image
|
||||
src={three}
|
||||
width={400}
|
||||
height={220}
|
||||
className="w-100 mh-220"
|
||||
alt="Image"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="tp-lp-post__meta mb-24 mt-8">
|
||||
<p className="author text-xs text-tertiary">
|
||||
Denial Lio
|
||||
</p>
|
||||
<span></span>
|
||||
<p className="date text-xs text-tertiary">
|
||||
18 Dec 2022
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mt-8 fw-5 text-secondary">
|
||||
<Link href="blog-single">
|
||||
Tackling data of annotation problems in healthcare
|
||||
</Link>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className="tp-lp-slider__single topy-tilt">
|
||||
<div className="thumb mb-24">
|
||||
<Link href="blog-single" className="w-100 overflow-hidden">
|
||||
<Image
|
||||
src={four}
|
||||
width={400}
|
||||
height={220}
|
||||
className="w-100 mh-220"
|
||||
alt="Image"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="tp-lp-post__meta mb-24 mt-8">
|
||||
<p className="author text-xs text-tertiary">
|
||||
Denial Lio
|
||||
</p>
|
||||
<span></span>
|
||||
<p className="date text-xs text-tertiary">
|
||||
18 Dec 2022
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mt-8 fw-5 text-secondary">
|
||||
<Link href="blog-single">
|
||||
Tackling data of annotation problems in healthcare
|
||||
</Link>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className="tp-lp-slider__single topy-tilt">
|
||||
<div className="thumb mb-24">
|
||||
<Link href="blog-single" className="w-100 overflow-hidden">
|
||||
<Image
|
||||
src={one}
|
||||
width={400}
|
||||
height={220}
|
||||
className="w-100 mh-220"
|
||||
alt="Image"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="tp-lp-post__meta mb-24 mt-8">
|
||||
<p className="author text-xs text-tertiary">
|
||||
Denial Lio
|
||||
</p>
|
||||
<span></span>
|
||||
<p className="date text-xs text-tertiary">
|
||||
18 Dec 2022
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mt-8 fw-5 text-secondary">
|
||||
<Link href="blog-single">
|
||||
Tackling data of annotation problems in healthcare
|
||||
</Link>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className="tp-lp-slider__single topy-tilt">
|
||||
<div className="thumb mb-24">
|
||||
<Link href="blog-single" className="w-100 overflow-hidden">
|
||||
<Image
|
||||
src={two}
|
||||
width={400}
|
||||
height={220}
|
||||
className="w-100 mh-220"
|
||||
alt="Image"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="tp-lp-post__meta mb-24 mt-8">
|
||||
<p className="author text-xs text-tertiary">
|
||||
Denial Lio
|
||||
</p>
|
||||
<span></span>
|
||||
<p className="date text-xs text-tertiary">
|
||||
18 Dec 2022
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mt-8 fw-5 text-secondary">
|
||||
<Link href="blog-single">
|
||||
Tackling data of annotation problems in healthcare
|
||||
</Link>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className="tp-lp-slider__single topy-tilt">
|
||||
<div className="thumb mb-24">
|
||||
<Link href="blog-single" className="w-100 overflow-hidden">
|
||||
<Image
|
||||
src={three}
|
||||
width={400}
|
||||
height={220}
|
||||
className="w-100 mh-220"
|
||||
alt="Image"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="tp-lp-post__meta mb-24 mt-8">
|
||||
<p className="author text-xs text-tertiary">
|
||||
Denial Lio
|
||||
</p>
|
||||
<span></span>
|
||||
<p className="date text-xs text-tertiary">
|
||||
18 Dec 2022
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mt-8 fw-5 text-secondary">
|
||||
<Link href="blog-single">
|
||||
Tackling data of annotation problems in healthcare
|
||||
</Link>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className="tp-lp-slider__single topy-tilt">
|
||||
<div className="thumb mb-24">
|
||||
<Link href="blog-single" className="w-100 overflow-hidden">
|
||||
<Image
|
||||
src={four}
|
||||
width={400}
|
||||
height={220}
|
||||
className="w-100 mh-220"
|
||||
alt="Image"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="tp-lp-post__meta mb-24 mt-8">
|
||||
<p className="author text-xs text-tertiary">
|
||||
Denial Lio
|
||||
</p>
|
||||
<span></span>
|
||||
<p className="date text-xs text-tertiary">
|
||||
18 Dec 2022
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mt-8 fw-5 text-secondary">
|
||||
<Link href="blog-single">
|
||||
Tackling data of annotation problems in healthcare
|
||||
</Link>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className="tp-lp-slider__single topy-tilt">
|
||||
<div className="thumb mb-24">
|
||||
<Link href="blog-single" className="w-100 overflow-hidden">
|
||||
<Image
|
||||
src={one}
|
||||
width={400}
|
||||
height={220}
|
||||
className="w-100 mh-220"
|
||||
alt="Image"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="tp-lp-post__meta mb-24 mt-8">
|
||||
<p className="author text-xs text-tertiary">
|
||||
Denial Lio
|
||||
</p>
|
||||
<span></span>
|
||||
<p className="date text-xs text-tertiary">
|
||||
18 Dec 2022
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mt-8 fw-5 text-secondary">
|
||||
<Link href="blog-single">
|
||||
Tackling data of annotation problems in healthcare
|
||||
</Link>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className="tp-lp-slider__single topy-tilt">
|
||||
<div className="thumb mb-24">
|
||||
<Link href="blog-single" className="w-100 overflow-hidden">
|
||||
<Image
|
||||
src={two}
|
||||
width={400}
|
||||
height={220}
|
||||
className="w-100 mh-220"
|
||||
alt="Image"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="tp-lp-post__meta mb-24 mt-8">
|
||||
<p className="author text-xs text-tertiary">
|
||||
Denial Lio
|
||||
</p>
|
||||
<span></span>
|
||||
<p className="date text-xs text-tertiary">
|
||||
18 Dec 2022
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mt-8 fw-5 text-secondary">
|
||||
<Link href="blog-single">
|
||||
Tackling data of annotation problems in healthcare
|
||||
</Link>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className="tp-lp-slider__single topy-tilt">
|
||||
<div className="thumb mb-24">
|
||||
<Link href="blog-single" className="w-100 overflow-hidden">
|
||||
<Image
|
||||
src={three}
|
||||
width={400}
|
||||
height={220}
|
||||
className="w-100 mh-220"
|
||||
alt="Image"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="tp-lp-post__meta mb-24 mt-8">
|
||||
<p className="author text-xs text-tertiary">
|
||||
Denial Lio
|
||||
</p>
|
||||
<span></span>
|
||||
<p className="date text-xs text-tertiary">
|
||||
18 Dec 2022
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mt-8 fw-5 text-secondary">
|
||||
<Link href="blog-single">
|
||||
Tackling data of annotation problems in healthcare
|
||||
</Link>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className="tp-lp-slider__single topy-tilt">
|
||||
<div className="thumb mb-24">
|
||||
<Link href="blog-single" className="w-100 overflow-hidden">
|
||||
<Image
|
||||
src={four}
|
||||
width={400}
|
||||
height={220}
|
||||
className="w-100 mh-220"
|
||||
alt="Image"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="tp-lp-post__meta mb-24 mt-8">
|
||||
<p className="author text-xs text-tertiary">
|
||||
Denial Lio
|
||||
</p>
|
||||
<span></span>
|
||||
<p className="date text-xs text-tertiary">
|
||||
18 Dec 2022
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mt-8 fw-5 text-secondary">
|
||||
<Link href="blog-single">
|
||||
Tackling data of annotation problems in healthcare
|
||||
</Link>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomeLatestPost;
|
||||
67
gnx-react/components/pages/home/HomeScrollProgressButton.tsx
Normal file
67
gnx-react/components/pages/home/HomeScrollProgressButton.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
"use client";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
|
||||
const HomeScrollProgressButton = () => {
|
||||
useEffect(() => {
|
||||
window.scroll(0, 0);
|
||||
}, []);
|
||||
|
||||
const [scrollProgress, setScrollProgress] = useState(0);
|
||||
const [isActive, setIsActive] = useState(false);
|
||||
const scrollRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
const handleScroll = () => {
|
||||
const totalHeight = document.body.scrollHeight - window.innerHeight;
|
||||
const progress = (window.scrollY / totalHeight) * 100;
|
||||
setScrollProgress(progress);
|
||||
setIsActive(window.scrollY > 50);
|
||||
};
|
||||
|
||||
const handleProgressClick = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
handleScroll();
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={scrollRef}
|
||||
className={`progress-wrap ${isActive ? " active-progress" : " "}`}
|
||||
onClick={handleProgressClick}
|
||||
title="Go To Top"
|
||||
>
|
||||
<span></span>
|
||||
<svg
|
||||
className="progress-circle svg-content"
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="-1 -1 102 102"
|
||||
>
|
||||
<path
|
||||
d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"
|
||||
stroke="#3887FE"
|
||||
strokeWidth="4"
|
||||
fill="none"
|
||||
style={{
|
||||
strokeDasharray: "308.66px",
|
||||
strokeDashoffset: `${308.66 - scrollProgress * 3.0866}px`,
|
||||
}}
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomeScrollProgressButton;
|
||||
121
gnx-react/components/pages/home/Overview.tsx
Normal file
121
gnx-react/components/pages/home/Overview.tsx
Normal file
@@ -0,0 +1,121 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/legacy/image";
|
||||
import Link from "next/link";
|
||||
import { useMemo } from "react";
|
||||
import { useServices } from "@/lib/hooks/useServices";
|
||||
import { serviceUtils } from "@/lib/api/serviceService";
|
||||
import one from "@/public/images/overview/one.png";
|
||||
import two from "@/public/images/overview/two.png";
|
||||
import three from "@/public/images/overview/three.png";
|
||||
import four from "@/public/images/overview/four.png";
|
||||
import five from "@/public/images/overview/five.png";
|
||||
|
||||
// Default images array for fallback
|
||||
const defaultImages = [one, two, three, four, five];
|
||||
|
||||
const Overview = () => {
|
||||
// Memoize the parameters to prevent infinite re-renders
|
||||
const serviceParams = useMemo(() => ({
|
||||
ordering: 'display_order',
|
||||
page: 1
|
||||
}), []);
|
||||
|
||||
// Fetch services from API, limit to 5 for overview section
|
||||
const { services, loading, error } = useServices(serviceParams);
|
||||
|
||||
// Get first 5 services for the overview
|
||||
const displayServices = services.slice(0, 5);
|
||||
return (
|
||||
<section
|
||||
className="tp-overview pt-120 pb-120 sticky-wrapper"
|
||||
id="scroll-to"
|
||||
>
|
||||
<div className="container">
|
||||
<div className="row vertical-column-gap-lg">
|
||||
<div className="col-12 col-lg-5">
|
||||
<div className="tp-overview__content sticky-item">
|
||||
<h2 className="fw-7 text-secondary title-anim mb-30 mt-8">
|
||||
Enterprise Solutions That Scale
|
||||
</h2>
|
||||
<p className="mt-8 cur-lg">
|
||||
Our enterprise software development teams deliver mission-critical solutions
|
||||
for Fortune 500 companies. We design, build, and deploy scalable systems
|
||||
that transform your business operations, enhance security, and drive digital
|
||||
innovation across your organization.
|
||||
</p>
|
||||
<div className="mt-40">
|
||||
<Link href="services" className="btn-line text-uppercase">
|
||||
EXPLORE SOLUTIONS
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-lg-7 col-xxl-6 offset-xxl-1">
|
||||
<div className="tp-overview__items sticky-item">
|
||||
{loading ? (
|
||||
// Loading state
|
||||
<div className="text-center py-5">
|
||||
<div className="spinner-border text-primary" role="status">
|
||||
<span className="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<p className="mt-3 text-muted">Loading services...</p>
|
||||
</div>
|
||||
) : error ? (
|
||||
// Error state
|
||||
<div className="text-center py-5">
|
||||
<p className="text-danger">Failed to load services. Please try again later.</p>
|
||||
</div>
|
||||
) : displayServices.length === 0 ? (
|
||||
// No services state
|
||||
<div className="text-center py-5">
|
||||
<p className="text-muted">No services available at the moment.</p>
|
||||
</div>
|
||||
) : (
|
||||
// Services list
|
||||
displayServices.map((service, index) => {
|
||||
// Always use hardcoded images, not API images
|
||||
const serviceImage = defaultImages[index] || defaultImages[0];
|
||||
|
||||
return (
|
||||
<div key={service.id} className="tp-overview-single appear-down">
|
||||
<div className="thumb">
|
||||
<Image
|
||||
src={serviceImage}
|
||||
width={80}
|
||||
height={80}
|
||||
alt={service.title}
|
||||
/>
|
||||
</div>
|
||||
<div className="wrapper">
|
||||
<div className="content">
|
||||
<h4 className="mt-8 mb-12 fw-6 text-secondary">
|
||||
<Link href={`/services/${service.slug}`}>
|
||||
{service.title}
|
||||
</Link>
|
||||
</h4>
|
||||
<p className="text-tertiary">
|
||||
{service.short_description || service.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="cta">
|
||||
<Link href={`/services/${service.slug}`}>
|
||||
<span className="material-symbols-outlined">
|
||||
call_made
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Overview;
|
||||
54
gnx-react/components/pages/home/ServiceIntro.tsx
Normal file
54
gnx-react/components/pages/home/ServiceIntro.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import Image from "next/legacy/image";
|
||||
import Link from "next/link";
|
||||
import thumb from "@/public/images/service/one.png";
|
||||
|
||||
const ServiceIntro = () => {
|
||||
return (
|
||||
<section className="tp-service pt-120 pb-120">
|
||||
<div className="container">
|
||||
<div className="row vertical-column-gap-md">
|
||||
<div className="col-12 col-lg-5">
|
||||
<div className="tp-service__thumb fade-img">
|
||||
<Link href="service-single" className="w-100">
|
||||
<div className="parallax-image-wrap">
|
||||
<div className="parallax-image-inner">
|
||||
<Image
|
||||
src={thumb}
|
||||
className="w-100 mh-300 parallax-image"
|
||||
alt="Image"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-lg-7 col-xl-6 offset-xl-1">
|
||||
<div className="tp-service__content">
|
||||
<h2 className="mt-8 title-anim text-secondary fw-7 mb-30 text-capitalize">
|
||||
Leading Enterprise Software Solutions Provider.
|
||||
</h2>
|
||||
<div className="pl-100">
|
||||
<p className="cur-lg">
|
||||
Transform your enterprise with cutting-edge software solutions,
|
||||
system integrations, and digital transformation services. We help
|
||||
Fortune 500 companies modernize their technology infrastructure,
|
||||
enhance security, and achieve operational excellence through
|
||||
innovative software development.
|
||||
</p>
|
||||
<div className="mt-60">
|
||||
<Link href="service-single" className="btn-anim btn-anim-light">
|
||||
Our Solutions
|
||||
<i className="fa-solid fa-arrow-trend-up"></i>
|
||||
<span></span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServiceIntro;
|
||||
136
gnx-react/components/pages/home/Story.tsx
Normal file
136
gnx-react/components/pages/home/Story.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
import Image from "next/legacy/image";
|
||||
import Link from "next/link";
|
||||
import { getValidImageUrl, FALLBACK_IMAGES } from "@/lib/imageUtils";
|
||||
|
||||
const Story = () => {
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
const [activeImageIndex, setActiveImageIndex] = useState(0);
|
||||
|
||||
// Static case studies data
|
||||
const storyData = [
|
||||
{
|
||||
id: 1,
|
||||
destination: "Financial Services",
|
||||
title: "Banking System Modernization",
|
||||
subtitle: "Complete digital transformation of legacy banking systems with enhanced security and real-time processing capabilities.",
|
||||
image: "/images/case/one.png",
|
||||
path: "/case-study/banking-system-modernization",
|
||||
display_order: 1,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString()
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
destination: "Healthcare",
|
||||
title: "Patient Management System",
|
||||
subtitle: "Enterprise-grade patient management system with HIPAA compliance and seamless integration across multiple healthcare facilities.",
|
||||
image: "/images/case/two.png",
|
||||
path: "/case-study/patient-management-system",
|
||||
display_order: 2,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString()
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
destination: "Manufacturing",
|
||||
title: "Supply Chain Optimization",
|
||||
subtitle: "Advanced supply chain management system with real-time tracking, predictive analytics, and automated inventory management.",
|
||||
image: "/images/case/three.png",
|
||||
path: "/case-study/supply-chain-optimization",
|
||||
display_order: 3,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString()
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
destination: "E-commerce",
|
||||
title: "Multi-Platform Integration",
|
||||
subtitle: "Seamless integration of multiple e-commerce platforms with unified inventory management and real-time synchronization.",
|
||||
image: "/images/case/four.png",
|
||||
path: "/case-study/multi-platform-integration",
|
||||
display_order: 4,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString()
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
destination: "Education",
|
||||
title: "Learning Management System",
|
||||
subtitle: "Comprehensive LMS with advanced analytics, automated grading, and seamless integration with existing educational tools.",
|
||||
image: "/images/case/five.png",
|
||||
path: "/case-study/learning-management-system",
|
||||
display_order: 5,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString()
|
||||
}
|
||||
];
|
||||
|
||||
const handleMouseEnter = (index: number) => {
|
||||
setActiveIndex(index);
|
||||
setActiveImageIndex(index);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<section className="tp-story pt-120 pb-120 bg-black sticky-wrapper fade-wrapper">
|
||||
<div className="container">
|
||||
<div className="row vertical-column-gap-md">
|
||||
<div className="col-12 col-lg-5">
|
||||
<div className="tp-story__content sticky-item">
|
||||
<h2 className="mt-8 title-anim text-white fw-7">
|
||||
Enterprise Case Studies
|
||||
</h2>
|
||||
<div className="tp-story__items">
|
||||
{storyData.map((item, index) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={`tp-story__single fade-top ${
|
||||
index === activeIndex ? "active" : ""
|
||||
}`}
|
||||
onMouseEnter={() => handleMouseEnter(index)}
|
||||
>
|
||||
<p className="fw-6 mt-8">
|
||||
<Link href={`${item.path}`}>{item.destination}</Link>
|
||||
</p>
|
||||
<h5 className="fw-4 mt-12 mb-12 text-white">
|
||||
{item.title}
|
||||
</h5>
|
||||
<p className="text-xs">{item.subtitle}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-lg-7 col-xxl-6 offset-xxl-1 d-none d-lg-block">
|
||||
<div className="tp-story__thumbs sticky-item">
|
||||
{storyData.map((item, index) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={`tp-story-thumb ${
|
||||
index === activeImageIndex ? "thumb-active" : ""
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
src={getValidImageUrl(item.image, FALLBACK_IMAGES.CASE_STUDY)}
|
||||
width={600}
|
||||
height={300}
|
||||
className="w-100 mh-300"
|
||||
alt="Image"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Story;
|
||||
Reference in New Issue
Block a user