update
This commit is contained in:
Iliyan Angelov
@@ -3,6 +3,7 @@ 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 = () => {
|
||||
@@ -52,7 +53,7 @@ const AboutStarter = () => {
|
||||
const journeyData = data?.journey as AboutJourney | undefined;
|
||||
|
||||
return (
|
||||
<section className="tp-gallery">
|
||||
<section className="tp-gallery about-compact">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-12 col-lg-6">
|
||||
@@ -65,7 +66,7 @@ const AboutStarter = () => {
|
||||
{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."}
|
||||
{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 ? (
|
||||
@@ -112,7 +113,7 @@ const AboutStarter = () => {
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<div className="cta-wrap">
|
||||
<Link
|
||||
href={journeyData?.cta_link || "services"}
|
||||
className="btn-line"
|
||||
@@ -124,26 +125,123 @@ const AboutStarter = () => {
|
||||
</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'
|
||||
}}
|
||||
/>
|
||||
{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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user