GNXSOFT.COM
This commit is contained in:
Iliyan Angelov
271
gnx-react/components/pages/about/AboutBanner.tsx
Normal file
271
gnx-react/components/pages/about/AboutBanner.tsx
Normal file
@@ -0,0 +1,271 @@
|
||||
"use client";
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useAbout } from "@/lib/hooks/useAbout";
|
||||
|
||||
const AboutBanner = () => {
|
||||
const { data, loading, error } = useAbout();
|
||||
const [currentMetric, setCurrentMetric] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
// Auto-rotate metrics
|
||||
const interval = setInterval(() => {
|
||||
setCurrentMetric(prev => (prev + 1) % 3);
|
||||
}, 4000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
// Show loading state
|
||||
if (loading) {
|
||||
return (
|
||||
<section className="about-banner fix-top pb-120 position-relative overflow-x-clip">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<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">Loading about us content...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// Show error state
|
||||
if (error) {
|
||||
return (
|
||||
<section className="about-banner fix-top pb-120 position-relative overflow-x-clip">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="text-center py-5">
|
||||
<div className="alert alert-danger" role="alert">
|
||||
<h4 className="alert-heading">Error Loading Content</h4>
|
||||
<p>{error}</p>
|
||||
<hr />
|
||||
<p className="mb-0">Please try refreshing the page or contact support if the problem persists.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// Use API data or fallback to default content
|
||||
const bannerData = data?.banner;
|
||||
|
||||
const metrics = [
|
||||
{ value: "500+", label: "Fortune 500 Clients", icon: "fa-building", color: "#3b82f6" },
|
||||
{ value: "99.9%", label: "Uptime Guarantee", icon: "fa-shield-halved", color: "#10b981" },
|
||||
{ value: "24/7", label: "Enterprise Support", icon: "fa-headset", color: "#f59e0b" },
|
||||
{ value: "15+", label: "Years Experience", icon: "fa-award", color: "#8b5cf6" }
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="hero-banner">
|
||||
{/* Video-like Background */}
|
||||
<div className="hero-background">
|
||||
{/* Animated Code Lines */}
|
||||
<div className="code-animation">
|
||||
<div className="code-line line-1">
|
||||
<span className="code-keyword">const</span> enterprise = <span className="code-string">'mission-critical'</span>;
|
||||
</div>
|
||||
<div className="code-line line-2">
|
||||
<span className="code-keyword">if</span> (security.level === <span className="code-string">'enterprise'</span>) {
|
||||
</div>
|
||||
<div className="code-line line-3">
|
||||
deploy<span className="code-function">()</span>;
|
||||
</div>
|
||||
<div className="code-line line-4">
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating Tech Icons */}
|
||||
<div className="floating-tech">
|
||||
<div className="tech-icon icon-1">
|
||||
<i className="fa-solid fa-shield-halved"></i>
|
||||
</div>
|
||||
<div className="tech-icon icon-2">
|
||||
<i className="fa-solid fa-cloud"></i>
|
||||
</div>
|
||||
<div className="tech-icon icon-3">
|
||||
<i className="fa-solid fa-server"></i>
|
||||
</div>
|
||||
<div className="tech-icon icon-4">
|
||||
<i className="fa-solid fa-lock"></i>
|
||||
</div>
|
||||
<div className="tech-icon icon-5">
|
||||
<i className="fa-solid fa-chart-line"></i>
|
||||
</div>
|
||||
<div className="tech-icon icon-6">
|
||||
<i className="fa-solid fa-database"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enterprise Dashboard Elements */}
|
||||
<div className="dashboard-elements">
|
||||
<div className="dashboard-card card-1">
|
||||
<div className="card-header">
|
||||
<i className="fa-solid fa-shield-check"></i>
|
||||
<span>Security Status</span>
|
||||
</div>
|
||||
<div className="card-content">
|
||||
<div className="status-indicator resolved"></div>
|
||||
<span>Enterprise Grade</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="dashboard-card card-2">
|
||||
<div className="card-header">
|
||||
<i className="fa-solid fa-clock"></i>
|
||||
<span>SLA Response</span>
|
||||
</div>
|
||||
<div className="card-content">
|
||||
<div className="metric-value">99.9%</div>
|
||||
<span>Uptime</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="dashboard-card card-3">
|
||||
<div className="card-header">
|
||||
<i className="fa-solid fa-building"></i>
|
||||
<span>Enterprise Clients</span>
|
||||
</div>
|
||||
<div className="card-content">
|
||||
<div className="metric-value">500+</div>
|
||||
<span>Fortune 500</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Network Connection Lines */}
|
||||
<div className="network-lines">
|
||||
<div className="connection-line line-1"></div>
|
||||
<div className="connection-line line-2"></div>
|
||||
<div className="connection-line line-3"></div>
|
||||
<div className="connection-line line-4"></div>
|
||||
</div>
|
||||
|
||||
{/* Data Flow Particles */}
|
||||
<div className="data-particles">
|
||||
<div className="particle particle-1"></div>
|
||||
<div className="particle particle-2"></div>
|
||||
<div className="particle particle-3"></div>
|
||||
<div className="particle particle-4"></div>
|
||||
<div className="particle particle-5"></div>
|
||||
<div className="particle particle-6"></div>
|
||||
</div>
|
||||
|
||||
{/* Background Gradient Overlay */}
|
||||
<div className="video-overlay"></div>
|
||||
</div>
|
||||
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-12 col-lg-10 col-xl-8">
|
||||
<div className="hero-content text-center">
|
||||
{/* Badge */}
|
||||
<div className="hero-badge">
|
||||
<div className="badge-icon">
|
||||
<i className="fa-solid fa-shield-check"></i>
|
||||
</div>
|
||||
<span>Enterprise Security Certified</span>
|
||||
</div>
|
||||
|
||||
{/* Main Title */}
|
||||
<h1 className="hero-title">
|
||||
{bannerData?.title || "Mission-Critical Software Solutions for Global Enterprises"}
|
||||
</h1>
|
||||
|
||||
{/* Description */}
|
||||
<p className="hero-description">
|
||||
{bannerData?.description || "Trusted by Fortune 500 companies worldwide, we deliver enterprise-grade software solutions with 99.9% uptime SLA, SOC 2 Type II certification, and 24/7 dedicated support. Our mission-critical platforms power digital transformation across industries."}
|
||||
</p>
|
||||
|
||||
{/* Key Metrics */}
|
||||
<div className="hero-metrics">
|
||||
{metrics.map((metric, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`metric-item ${currentMetric === index ? 'active' : ''}`}
|
||||
onClick={() => setCurrentMetric(index)}
|
||||
>
|
||||
<div className="metric-icon" style={{ backgroundColor: metric.color }}>
|
||||
<i className={`fa-solid ${metric.icon}`}></i>
|
||||
</div>
|
||||
<div className="metric-content">
|
||||
<div className="metric-value">{metric.value}</div>
|
||||
<div className="metric-label">{metric.label}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<div className="hero-actions">
|
||||
<Link href={bannerData?.cta_link || "services"} className="btn-primary">
|
||||
<span>View Enterprise Solutions</span>
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
<Link href="contact-us" className="btn-secondary">
|
||||
<span>Schedule Consultation</span>
|
||||
<i className="fa-solid fa-calendar-check"></i>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Trust Badges */}
|
||||
<div className="trust-badges">
|
||||
<div className="trust-badge">
|
||||
<i className="fa-solid fa-shield-check"></i>
|
||||
<span>SOC 2 Type II</span>
|
||||
</div>
|
||||
<div className="trust-badge">
|
||||
<i className="fa-solid fa-lock"></i>
|
||||
<span>ISO 27001</span>
|
||||
</div>
|
||||
<div className="trust-badge">
|
||||
<i className="fa-solid fa-certificate"></i>
|
||||
<span>GDPR Compliant</span>
|
||||
</div>
|
||||
<div className="trust-badge">
|
||||
<i className="fa-solid fa-globe"></i>
|
||||
<span>Global Operations</span>
|
||||
</div>
|
||||
<div className="trust-badge">
|
||||
<i className="fa-solid fa-award"></i>
|
||||
<span>Microsoft Partner</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Links */}
|
||||
<div className="social-links">
|
||||
<Link href="https://www.linkedin.com/company/enterprisesoft-solutions" target="_blank" className="social-link">
|
||||
<i className="fa-brands fa-linkedin-in"></i>
|
||||
</Link>
|
||||
<Link href="https://github.com/enterprisesoft" target="_blank" className="social-link">
|
||||
<i className="fa-brands fa-github"></i>
|
||||
</Link>
|
||||
<Link href="https://www.twitter.com/enterprisesoft" target="_blank" className="social-link">
|
||||
<i className="fa-brands fa-twitter"></i>
|
||||
</Link>
|
||||
<Link href="https://stackoverflow.com/teams/enterprisesoft" target="_blank" className="social-link">
|
||||
<i className="fa-brands fa-stack-overflow"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutBanner;
|
||||
367
gnx-react/components/pages/about/AboutCase.tsx
Normal file
367
gnx-react/components/pages/about/AboutCase.tsx
Normal file
@@ -0,0 +1,367 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Autoplay, Navigation } from "swiper/modules";
|
||||
import "swiper/swiper-bundle.css";
|
||||
import Counter from "../../common/Counter";
|
||||
import one from "@/public/images/study/one.png";
|
||||
import two from "@/public/images/study/two.png";
|
||||
import three from "@/public/images/study/three.png";
|
||||
import four from "@/public/images/study/four.png";
|
||||
import five from "@/public/images/study/five.png";
|
||||
|
||||
const AboutCase = () => {
|
||||
return (
|
||||
<section className="tp-study 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">
|
||||
<div className="enterprise-badge mb-20">
|
||||
<span className="badge enterprise-badge-content">
|
||||
<i className="fa-solid fa-chart-line"></i>
|
||||
Success Stories
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="mt-8 fw-7 text-secondary title-anim">
|
||||
Enterprise Success Stories
|
||||
</h2>
|
||||
<p className="cur-lg mt-20">
|
||||
Discover how we've helped Fortune 500 companies and innovative startups
|
||||
achieve their digital transformation goals through cutting-edge technology solutions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-lg-5">
|
||||
<div className="tp-study-arrows d-flex justify-content-center justify-content-lg-end">
|
||||
<button className="prev-study" aria-label="previous study">
|
||||
<span className="material-symbols-outlined">west</span>
|
||||
</button>
|
||||
<button className="next-study" aria-label="next study">
|
||||
<span className="material-symbols-outlined">east</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="tp-study-slider-wrapper">
|
||||
<div className="tp-study-slider-wrap">
|
||||
<Swiper
|
||||
slidesPerView={"auto"}
|
||||
spaceBetween={24}
|
||||
slidesPerGroup={1}
|
||||
freeMode={true}
|
||||
speed={1200}
|
||||
loop={true}
|
||||
roundLengths={true}
|
||||
modules={[Autoplay, Navigation]}
|
||||
autoplay={{
|
||||
delay: 5000,
|
||||
disableOnInteraction: false,
|
||||
pauseOnMouseEnter: true,
|
||||
}}
|
||||
className="tp-study-slider"
|
||||
navigation={{
|
||||
nextEl: ".prev-study",
|
||||
prevEl: ".next-study",
|
||||
}}
|
||||
>
|
||||
<SwiperSlide>
|
||||
<div className="tp-study-slider__single">
|
||||
<div className="thumb">
|
||||
<Link href="case-study-single">
|
||||
<Image
|
||||
src={one}
|
||||
className="w-100 mh-400"
|
||||
alt="Image"
|
||||
width={400}
|
||||
height={400}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
|
||||
<Link href="case-study-single">ENTERPRISE CRM</Link>
|
||||
</h5>
|
||||
<Link href="case-study-single" className="btn-angle">
|
||||
View
|
||||
<span></span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className="tp-study-slider__single">
|
||||
<div className="thumb">
|
||||
<Link href="case-study-single">
|
||||
<Image
|
||||
src={two}
|
||||
className="w-100 mh-400"
|
||||
alt="Image"
|
||||
width={400}
|
||||
height={400}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
|
||||
<Link href="case-study-single">ENTERPRISE CRM</Link>
|
||||
</h5>
|
||||
<Link href="case-study-single" className="btn-angle">
|
||||
View
|
||||
<span></span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className="tp-study-slider__single">
|
||||
<div className="thumb">
|
||||
<Link href="case-study-single">
|
||||
<Image
|
||||
src={three}
|
||||
className="w-100 mh-400"
|
||||
alt="Image"
|
||||
width={400}
|
||||
height={400}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
|
||||
<Link href="case-study-single">ENTERPRISE CRM</Link>
|
||||
</h5>
|
||||
<Link href="case-study-single" className="btn-angle">
|
||||
View
|
||||
<span></span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className="tp-study-slider__single">
|
||||
<div className="thumb">
|
||||
<Link href="case-study-single">
|
||||
<Image
|
||||
src={four}
|
||||
className="w-100 mh-400"
|
||||
alt="Image"
|
||||
width={400}
|
||||
height={400}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
|
||||
<Link href="case-study-single">ENTERPRISE CRM</Link>
|
||||
</h5>
|
||||
<Link href="case-study-single" className="btn-angle">
|
||||
View
|
||||
<span></span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className="tp-study-slider__single">
|
||||
<div className="thumb">
|
||||
<Link href="case-study-single">
|
||||
<Image
|
||||
src={five}
|
||||
className="w-100 mh-400"
|
||||
alt="Image"
|
||||
width={400}
|
||||
height={400}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
|
||||
<Link href="case-study-single">ENTERPRISE CRM</Link>
|
||||
</h5>
|
||||
<Link href="case-study-single" className="btn-angle">
|
||||
View
|
||||
<span></span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className="tp-study-slider__single">
|
||||
<div className="thumb">
|
||||
<Link href="case-study-single">
|
||||
<Image
|
||||
src={one}
|
||||
className="w-100 mh-400"
|
||||
alt="Image"
|
||||
width={400}
|
||||
height={400}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
|
||||
<Link href="case-study-single">ENTERPRISE CRM</Link>
|
||||
</h5>
|
||||
<Link href="case-study-single" className="btn-angle">
|
||||
View
|
||||
<span></span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className="tp-study-slider__single">
|
||||
<div className="thumb">
|
||||
<Link href="case-study-single">
|
||||
<Image
|
||||
src={two}
|
||||
className="w-100 mh-400"
|
||||
alt="Image"
|
||||
width={400}
|
||||
height={400}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
|
||||
<Link href="case-study-single">ENTERPRISE CRM</Link>
|
||||
</h5>
|
||||
<Link href="case-study-single" className="btn-angle">
|
||||
View
|
||||
<span></span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className="tp-study-slider__single">
|
||||
<div className="thumb">
|
||||
<Link href="case-study-single">
|
||||
<Image
|
||||
src={three}
|
||||
className="w-100 mh-400"
|
||||
alt="Image"
|
||||
width={400}
|
||||
height={400}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
|
||||
<Link href="case-study-single">ENTERPRISE CRM</Link>
|
||||
</h5>
|
||||
<Link href="case-study-single" className="btn-angle">
|
||||
View
|
||||
<span></span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className="tp-study-slider__single">
|
||||
<div className="thumb">
|
||||
<Link href="case-study-single">
|
||||
<Image
|
||||
src={four}
|
||||
className="w-100 mh-400"
|
||||
alt="Image"
|
||||
width={400}
|
||||
height={400}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
|
||||
<Link href="case-study-single">ENTERPRISE CRM</Link>
|
||||
</h5>
|
||||
<Link href="case-study-single" className="btn-angle">
|
||||
View
|
||||
<span></span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className="tp-study-slider__single">
|
||||
<div className="thumb">
|
||||
<Link href="case-study-single">
|
||||
<Image
|
||||
src={five}
|
||||
className="w-100 mh-400"
|
||||
alt="Image"
|
||||
width={400}
|
||||
height={400}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="mt-8 mb-12 text-white fw-5 text-uppercase">
|
||||
<Link href="case-study-single">ENTERPRISE CRM</Link>
|
||||
</h5>
|
||||
<Link href="case-study-single" className="btn-angle">
|
||||
View
|
||||
<span></span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row pt-120 vertical-column-gap-lg">
|
||||
<div className="col-12 col-sm-6 col-xl-3">
|
||||
<div className="counter__single text-center">
|
||||
<h2 className="fw-5 text-secondary mt-8 mb-16">
|
||||
<span className="odometer">
|
||||
<Counter value={500} />
|
||||
</span>
|
||||
<span>+</span>
|
||||
</h2>
|
||||
<p className="text-tertiary">Enterprise Projects</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-6 col-xl-3">
|
||||
<div className="counter__single text-center">
|
||||
<h2 className="fw-5 text-secondary mt-8 mb-16">
|
||||
<span className="odometer">
|
||||
<Counter value={99} />
|
||||
</span>
|
||||
<span>.9%</span>
|
||||
</h2>
|
||||
<p className="text-tertiary">Uptime SLA</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-6 col-xl-3">
|
||||
<div className="counter__single text-center">
|
||||
<h2 className="fw-5 text-secondary mt-8 mb-16">
|
||||
<span className="odometer">
|
||||
<Counter value={15} />
|
||||
</span>
|
||||
<span>+</span>
|
||||
</h2>
|
||||
<p className="text-tertiary">Years Experience</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-6 col-xl-3">
|
||||
<div className="counter__single text-center border-0">
|
||||
<h2 className="fw-5 text-secondary mt-8 mb-16">
|
||||
<span className="odometer">
|
||||
<Counter value={200} />
|
||||
</span>
|
||||
<span>+</span>
|
||||
</h2>
|
||||
<p className="text-tertiary">Expert Engineers</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutCase;
|
||||
65
gnx-react/components/pages/about/AboutInitAnimations.tsx
Normal file
65
gnx-react/components/pages/about/AboutInitAnimations.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 AboutInitAnimations = () => {
|
||||
return (
|
||||
<>
|
||||
<SmoothScroll />
|
||||
<ParallaxImage />
|
||||
<FadeImageBottom />
|
||||
<ButtonHoverAnimation />
|
||||
<VanillaTiltHover />
|
||||
<SplitTextAnimations />
|
||||
<ScrollToElement />
|
||||
<AppearDown />
|
||||
<FadeAnimations />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutInitAnimations;
|
||||
@@ -0,0 +1,67 @@
|
||||
"use client";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
|
||||
const AboutScrollProgressButton = () => {
|
||||
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 AboutScrollProgressButton;
|
||||
264
gnx-react/components/pages/about/AboutService.tsx
Normal file
264
gnx-react/components/pages/about/AboutService.tsx
Normal file
@@ -0,0 +1,264 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useAbout } from "@/lib/hooks/useAbout";
|
||||
import { AboutService as AboutServiceType, AboutProcess } from "@/lib/api/aboutService";
|
||||
import thumb from "@/public/images/service/two.png";
|
||||
import thumbTwo from "@/public/images/service/three.png";
|
||||
|
||||
const AboutServiceComponent = () => {
|
||||
const { data, loading, error } = useAbout();
|
||||
|
||||
// Show loading state
|
||||
if (loading) {
|
||||
return (
|
||||
<section className="tp-service pt-120 pb-120">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<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">Loading service content...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// Show error state
|
||||
if (error) {
|
||||
return (
|
||||
<section className="tp-service pt-120 pb-120">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="text-center py-5">
|
||||
<div className="alert alert-danger" role="alert">
|
||||
<h4 className="alert-heading">Error Loading Content</h4>
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// Use API data or fallback to default content
|
||||
const serviceData = data?.service as AboutServiceType | undefined;
|
||||
const processData = data?.process as AboutProcess | undefined;
|
||||
|
||||
return (
|
||||
<section className="tp-service">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-12 col-lg-5">
|
||||
<div className="tp-service__thumb">
|
||||
<Link href="service-single" className="w-100">
|
||||
<div className="parallax-image-wrap">
|
||||
<div className="parallax-image-inner">
|
||||
<Image
|
||||
src={serviceData?.image_url || thumb}
|
||||
className="w-100 parallax-image"
|
||||
alt="Enterprise Technology Solutions"
|
||||
width={400}
|
||||
height={300}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-lg-7 col-xl-6 offset-xl-1">
|
||||
<div className="tp-service__content">
|
||||
<div className="enterprise-badge">
|
||||
<i className={serviceData?.badge_icon || "fa-solid fa-users"}></i>
|
||||
{serviceData?.badge_text || "About Our Company"}
|
||||
</div>
|
||||
<h2 className="title-anim">
|
||||
{serviceData?.title || "Enterprise Technology Leaders"}
|
||||
</h2>
|
||||
<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."}
|
||||
</p>
|
||||
<div className="enterprise-features">
|
||||
<div className="row">
|
||||
{serviceData?.features && serviceData.features.length > 0 ? (
|
||||
serviceData.features.map((feature, index) => (
|
||||
<div key={index} className="col-12 col-md-6">
|
||||
<div className="feature-item">
|
||||
<div className="feature-icon">
|
||||
<i className={feature.icon}></i>
|
||||
</div>
|
||||
<div className="feature-content">
|
||||
<h6>{feature.title}</h6>
|
||||
<p>{feature.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<>
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="feature-item">
|
||||
<div className="feature-icon">
|
||||
<i className="fa-solid fa-shield-halved"></i>
|
||||
</div>
|
||||
<div className="feature-content">
|
||||
<h6>Enterprise Security</h6>
|
||||
<p>SOC 2 Type II Certified</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="feature-item">
|
||||
<div className="feature-icon">
|
||||
<i className="fa-solid fa-cloud"></i>
|
||||
</div>
|
||||
<div className="feature-content">
|
||||
<h6>Cloud Native</h6>
|
||||
<p>AWS, Azure, GCP Partners</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="feature-item">
|
||||
<div className="feature-icon">
|
||||
<i className="fa-solid fa-certificate"></i>
|
||||
</div>
|
||||
<div className="feature-content">
|
||||
<h6>Certified Experts</h6>
|
||||
<p>Microsoft, AWS, Google Certified</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="feature-item">
|
||||
<div className="feature-icon">
|
||||
<i className="fa-solid fa-globe"></i>
|
||||
</div>
|
||||
<div className="feature-content">
|
||||
<h6>Global Reach</h6>
|
||||
<p>Offices in 5 Countries</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<Link href={serviceData?.cta_link || "service-single"} className="btn-line">
|
||||
{serviceData?.cta_text || "Explore Our Solutions"}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row align-items-center">
|
||||
<div className="col-12 col-lg-6">
|
||||
<div className="tp-service__content">
|
||||
<div className="enterprise-badge">
|
||||
<i className={processData?.badge_icon || "fa-solid fa-cogs"}></i>
|
||||
{processData?.badge_text || "Our Methodology"}
|
||||
</div>
|
||||
<h2 className="title-anim">
|
||||
{processData?.title || "Enterprise Development Process"}
|
||||
</h2>
|
||||
<p>
|
||||
{processData?.description || "Our proven enterprise development methodology combines agile practices with enterprise-grade security, scalability, and compliance requirements. We follow industry best practices including DevOps, CI/CD, and microservices architecture to deliver robust, scalable solutions."}
|
||||
</p>
|
||||
<div className="process-steps">
|
||||
<div className="row">
|
||||
{processData?.steps && processData.steps.length > 0 ? (
|
||||
processData.steps.map((step, index) => (
|
||||
<div key={index} className="col-12 col-md-6">
|
||||
<div className="process-step">
|
||||
<div className="step-number">{step.step_number}</div>
|
||||
<div className="step-content">
|
||||
<h6>{step.title}</h6>
|
||||
<p>{step.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<>
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="process-step">
|
||||
<div className="step-number">01</div>
|
||||
<div className="step-content">
|
||||
<h6>Discovery & Planning</h6>
|
||||
<p>Comprehensive analysis and architecture design</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="process-step">
|
||||
<div className="step-number">02</div>
|
||||
<div className="step-content">
|
||||
<h6>Development & Testing</h6>
|
||||
<p>Agile development with continuous testing</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="process-step">
|
||||
<div className="step-number">03</div>
|
||||
<div className="step-content">
|
||||
<h6>Deployment & Integration</h6>
|
||||
<p>Seamless deployment and system integration</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="process-step">
|
||||
<div className="step-number">04</div>
|
||||
<div className="step-content">
|
||||
<h6>Support & Maintenance</h6>
|
||||
<p>24/7 enterprise support and maintenance</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<Link href={processData?.cta_link || "service-single"} className="btn-line">
|
||||
{processData?.cta_text || "View Our Services"}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-lg-6">
|
||||
<div className="tp-service__thumb">
|
||||
<Link href="service-single" className="w-100">
|
||||
<div className="parallax-image-wrap">
|
||||
<div className="parallax-image-inner">
|
||||
<Image
|
||||
src={processData?.image_url || thumbTwo}
|
||||
className="w-100 parallax-image"
|
||||
alt="Enterprise Development Process"
|
||||
width={400}
|
||||
height={300}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutServiceComponent;
|
||||
|
||||
|
||||
151
gnx-react/components/pages/about/AboutStarter.tsx
Normal file
151
gnx-react/components/pages/about/AboutStarter.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useAbout } from "@/lib/hooks/useAbout";
|
||||
import { AboutJourney } from "@/lib/api/aboutService";
|
||||
import thumb from "@/public/images/start-thumb.png";
|
||||
|
||||
const AboutStarter = () => {
|
||||
const { data, loading, error } = useAbout();
|
||||
|
||||
// Show loading state
|
||||
if (loading) {
|
||||
return (
|
||||
<section className="tp-gallery pt-120 bg-black position-relative overflow-x-clip">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="text-center py-5">
|
||||
<div className="spinner-border text-light" role="status">
|
||||
<span className="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<p className="mt-3 text-white">Loading journey content...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// Show error state
|
||||
if (error) {
|
||||
return (
|
||||
<section className="tp-gallery pt-120 bg-black position-relative overflow-x-clip">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="text-center py-5">
|
||||
<div className="alert alert-danger" role="alert">
|
||||
<h4 className="alert-heading">Error Loading Content</h4>
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// Use API data or fallback to default content
|
||||
const journeyData = data?.journey as AboutJourney | undefined;
|
||||
|
||||
return (
|
||||
<section className="tp-gallery">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-12 col-lg-6">
|
||||
<div className="tp-gallery__content">
|
||||
<div className="enterprise-badge">
|
||||
<i className={journeyData?.badge_icon || "fa-solid fa-rocket"}></i>
|
||||
{journeyData?.badge_text || "Our Journey"}
|
||||
</div>
|
||||
<h2 className="title-anim">
|
||||
{journeyData?.title || "From Startup to Enterprise Leader"}
|
||||
</h2>
|
||||
<p>
|
||||
{journeyData?.description || "Founded in 2008 by three visionary engineers, Itify Technologies began as a small startup with a big dream: to revolutionize how enterprises approach software development. What started as a passion project has grown into a global enterprise software company serving Fortune 500 clients worldwide."}
|
||||
</p>
|
||||
<div className="journey-milestones">
|
||||
{journeyData?.milestones && journeyData.milestones.length > 0 ? (
|
||||
journeyData.milestones.map((milestone, index) => (
|
||||
<div key={index} className="milestone-item">
|
||||
<div className="milestone-year">
|
||||
<span className="year-badge">{milestone.year}</span>
|
||||
</div>
|
||||
<div className="milestone-content">
|
||||
<h6>{milestone.title}</h6>
|
||||
<p>{milestone.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<>
|
||||
<div className="milestone-item">
|
||||
<div className="milestone-year">
|
||||
<span className="year-badge">2008</span>
|
||||
</div>
|
||||
<div className="milestone-content">
|
||||
<h6>Company Founded</h6>
|
||||
<p>Started with 3 engineers</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="milestone-item">
|
||||
<div className="milestone-year">
|
||||
<span className="year-badge">2015</span>
|
||||
</div>
|
||||
<div className="milestone-content">
|
||||
<h6>Enterprise Focus</h6>
|
||||
<p>Pivoted to enterprise solutions</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="milestone-item">
|
||||
<div className="milestone-year">
|
||||
<span className="year-badge">2020</span>
|
||||
</div>
|
||||
<div className="milestone-content">
|
||||
<h6>Global Expansion</h6>
|
||||
<p>Opened offices in 5 countries</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<Link
|
||||
href={journeyData?.cta_link || "services"}
|
||||
className="btn-line"
|
||||
>
|
||||
{journeyData?.cta_text || "Explore Solutions"}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-lg-6">
|
||||
<div className="tp-gallery__thumb">
|
||||
<Image
|
||||
src={journeyData?.image_url || thumb}
|
||||
className="w-100"
|
||||
alt="Enterprise Journey"
|
||||
width={500}
|
||||
height={400}
|
||||
style={{
|
||||
objectFit: 'contain',
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 20px 40px rgba(0, 0, 0, 0.1)',
|
||||
maxWidth: '100%',
|
||||
maxHeight: '500px',
|
||||
width: '100%',
|
||||
height: 'auto'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutStarter;
|
||||
Reference in New Issue
Block a user