GNXSOFT.COM

gnx-react/components/pages/about/AboutStarter.tsx

@@ -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;