250 lines
8.7 KiB
TypeScript
250 lines
8.7 KiB
TypeScript
"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 { getValidImageUrl, FALLBACK_IMAGES } from "@/lib/imageUtils";
|
|
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 about-compact">
|
|
<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 2020 by three visionary engineers, GNX 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="cta-wrap">
|
|
<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">
|
|
{journeyData?.image_url ? (
|
|
<img
|
|
src={getValidImageUrl(journeyData.image_url, FALLBACK_IMAGES.DEFAULT)}
|
|
className="w-100 compact-img"
|
|
alt="Enterprise Journey"
|
|
width={500}
|
|
height={400}
|
|
/>
|
|
) : (
|
|
<Image
|
|
src={thumb}
|
|
className="w-100 compact-img"
|
|
alt="Enterprise Journey"
|
|
width={500}
|
|
height={400}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style jsx>{`
|
|
.about-compact {
|
|
padding: 32px 0;
|
|
}
|
|
|
|
/* Typography */
|
|
.about-compact .enterprise-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
color: #fff;
|
|
margin-bottom: 10px;
|
|
}
|
|
.about-compact .enterprise-badge i { font-size: 12px; }
|
|
|
|
.about-compact .title-anim {
|
|
font-size: clamp(20px, 2.2vw, 28px);
|
|
line-height: 1.25;
|
|
margin: 0 0 8px 0;
|
|
}
|
|
.about-compact p {
|
|
font-size: 14px;
|
|
line-height: 1.55;
|
|
margin: 0 0 12px 0;
|
|
color: rgba(255,255,255,0.85);
|
|
}
|
|
|
|
/* Milestones */
|
|
.about-compact .journey-milestones {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 10px;
|
|
}
|
|
@media (min-width: 992px) {
|
|
.about-compact .journey-milestones { grid-template-columns: 1fr 1fr; }
|
|
}
|
|
.about-compact .milestone-item {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
align-items: start;
|
|
gap: 10px;
|
|
padding: 10px 12px;
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
background: rgba(255,255,255,0.03);
|
|
border-radius: 10px;
|
|
}
|
|
.about-compact .year-badge {
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
border-radius: 6px;
|
|
background: rgba(255,255,255,0.08);
|
|
color: #fff;
|
|
white-space: nowrap;
|
|
}
|
|
.about-compact .milestone-content h6 {
|
|
margin: 0 0 4px 0;
|
|
font-size: 14px;
|
|
line-height: 1.3;
|
|
}
|
|
.about-compact .milestone-content p {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
color: rgba(255,255,255,0.75);
|
|
}
|
|
|
|
/* CTA */
|
|
.about-compact .cta-wrap { margin-top: 12px; }
|
|
.about-compact :global(.btn-line) {
|
|
padding: 8px 14px;
|
|
font-size: 13px;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* Image */
|
|
.about-compact .tp-gallery__thumb { margin-top: 8px; }
|
|
@media (min-width: 992px) {
|
|
.about-compact .tp-gallery__thumb { margin-top: 0; }
|
|
}
|
|
.about-compact :global(.compact-img),
|
|
.about-compact .compact-img {
|
|
border-radius: 10px;
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
|
|
max-height: 260px;
|
|
width: 100%;
|
|
height: auto;
|
|
object-fit: contain;
|
|
}
|
|
`}</style>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default AboutStarter;
|