Update src/app/page.tsx

Update src/app/layout.tsx
Merge version_2 into main
2026-03-03 22:19:09 +00:00 · 2026-03-03 22:19:08 +00:00 · 2026-03-03 07:04:21 +00:00 · 2026-03-03 07:04:16 +00:00 · 2026-03-03 07:02:07 +00:00 · 2026-03-03 07:02:02 +00:00
3 changed files with 183 additions and 32 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,22 +1,17 @@
 import type { Metadata } from "next";
-import { Archivo } from "next/font/google";
-import { Halant } from "next/font/google";
-import { Inter } from "next/font/google";
+import { Poppins } from "next/font/google";
+import { DM_Sans } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";

-const archivo = Archivo({
-  variable: "--font-archivo",  subsets: ["latin"],
+const poppins = Poppins({
+  variable: "--font-poppins",  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
 });

-const halant = Halant({
-  variable: "--font-halant",  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
-});
-
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
+const dmSans = DM_Sans({
+  variable: "--font-dm-sans",  subsets: ["latin"],
 });

 export const metadata: Metadata = {
@@ -43,9 +38,14 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script async src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
+        <script async src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/ScrollTrigger.min.js"></script>
+        <script async src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/Draggable.min.js"></script>
+      </head>
      <ServiceWrapper>
        <body
-          className={`${archivo.variable} ${halant.variable} ${inter.variable} antialiased`}
+          className={`${poppins.variable} ${dmSans.variable} antialiased`}
        >
          <Tag />
          {children}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,21 +11,39 @@ import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCa
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterCard from '@/components/sections/footer/FooterCard';
-import { Zap, CheckCircle, Lightbulb, Leaf, Linkedin, Twitter, Mail } from 'lucide-react';
+import TimelineProcessFlow from '@/components/cardStack/layouts/timelines/TimelineProcessFlow';
+import { Zap, CheckCircle, Lightbulb, Leaf, Linkedin, Twitter, Mail, TrendingUp, Zap as ZapIcon, Gauge } from 'lucide-react';
+import Image from 'next/image';
+import { useEffect } from 'react';

 export default function ShatexLanding() {
+  useEffect(() => {
+    // Ensure GSAP is available globally
+    if (typeof window !== 'undefined') {
+      const script = document.createElement('script');
+      script.src = 'https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js';
+      script.async = true;
+      document.head.appendChild(script);
+
+      const scriptST = document.createElement('script');
+      scriptST.src = 'https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/ScrollTrigger.min.js';
+      scriptST.async = true;
+      document.head.appendChild(scriptST);
+    }
+  }, []);
+
  return (
    <ThemeProvider
-      defaultButtonVariant="elastic-effect"
-      defaultTextAnimation="background-highlight"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
-      contentWidth="small"
-      sizing="large"
+      contentWidth="mediumLarge"
+      sizing="mediumLargeSizeLargeTitles"
      background="circleGradient"
-      cardStyle="layered-gradient"
-      primaryButtonStyle="double-inset"
-      secondaryButtonStyle="radial-glow"
-      headingFontWeight="light"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
@@ -33,7 +51,8 @@ export default function ShatexLanding() {
          navItems={[
            { name: "Services", id: "services" },
            { name: "Portfolio", id: "portfolio" },
-            { name: "About", id: "about" },
+            { name: "Timeline", id: "timeline" },
+            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Get Started", href: "#contact" }}
@@ -167,6 +186,138 @@ export default function ShatexLanding() {
        />
      </div>

+      <div id="timeline" data-section="timeline">
+        <TimelineProcessFlow
+          title="Company Milestones & Evolution"
+          description="Discover the key moments and achievements that shaped Shatex Services into the industry leader it is today."
+          tag="Our Journey"
+          textboxLayout="default"
+          animationType="slide-up"
+          items={[
+            {
+              id: "1",              reverse: false,
+              media: (
+                <div className="relative w-full h-full bg-gradient-to-br from-teal-400 to-blue-600 rounded-lg overflow-hidden">
+                  <Image
+                    src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQMwNu50RAgmBhcHJELHP39VNP/a-professional-engineering-project-showc-1772520655872-7508b664.png"
+                    alt="Founding Year"
+                    fill
+                    className="object-cover"
+                  />
+                </div>
+              ),
+              content: (
+                <div className="space-y-3">
+                  <h3 className="text-2xl font-semibold text-foreground">2010 - Foundation Year</h3>
+                  <p className="text-foreground/80">Shatex Services was founded with a vision to deliver innovative engineering solutions. Started with a small team of industry experts.</p>
+                  <ul className="space-y-2 text-foreground/70">
+                    <li className="flex items-center gap-2"><span className="text-primary-cta">•</span> Established core team</li>
+                    <li className="flex items-center gap-2"><span className="text-primary-cta">•</span> First major client engagement</li>
+                    <li className="flex items-center gap-2"><span className="text-primary-cta">•</span> Infrastructure focus</li>
+                  </ul>
+                </div>
+              )
+            },
+            {
+              id: "2",              reverse: true,
+              media: (
+                <div className="relative w-full h-full bg-gradient-to-br from-purple-400 to-indigo-600 rounded-lg overflow-hidden">
+                  <Image
+                    src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQMwNu50RAgmBhcHJELHP39VNP/a-professional-consultancy-image-showing-1772520655520-4c82983c.png"
+                    alt="Expansion Phase"
+                    fill
+                    className="object-cover"
+                  />
+                </div>
+              ),
+              content: (
+                <div className="space-y-3">
+                  <h3 className="text-2xl font-semibold text-foreground">2015 - Expansion Phase</h3>
+                  <p className="text-foreground/80">Expanded service offerings to include consultancy, project management, and sustainability solutions.</p>
+                  <ul className="space-y-2 text-foreground/70">
+                    <li className="flex items-center gap-2"><span className="text-primary-cta">•</span> Opened new regional offices</li>
+                    <li className="flex items-center gap-2"><span className="text-primary-cta">•</span> 50+ team members</li>
+                    <li className="flex items-center gap-2"><span className="text-primary-cta">•</span> 100+ projects completed</li>
+                  </ul>
+                </div>
+              )
+            },
+            {
+              id: "3",              reverse: false,
+              media: (
+                <div className="relative w-full h-full bg-gradient-to-br from-green-400 to-teal-600 rounded-lg overflow-hidden">
+                  <Image
+                    src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQMwNu50RAgmBhcHJELHP39VNP/a-sustainability-focused-engineering-ima-1772520655742-a60f5d75.png"
+                    alt="Sustainability Leadership"
+                    fill
+                    className="object-cover"
+                  />
+                </div>
+              ),
+              content: (
+                <div className="space-y-3">
+                  <h3 className="text-2xl font-semibold text-foreground">2018 - Sustainability Leadership</h3>
+                  <p className="text-foreground/80">Became recognized as a thought leader in sustainable engineering solutions and green technology initiatives.</p>
+                  <ul className="space-y-2 text-foreground/70">
+                    <li className="flex items-center gap-2"><span className="text-primary-cta">•</span> Launched sustainability division</li>
+                    <li className="flex items-center gap-2"><span className="text-primary-cta">•</span> Industry certifications earned</li>
+                    <li className="flex items-center gap-2"><span className="text-primary-cta">•</span> 250M tons CO2 reduction</li>
+                  </ul>
+                </div>
+              )
+            },
+            {
+              id: "4",              reverse: true,
+              media: (
+                <div className="relative w-full h-full bg-gradient-to-br from-blue-400 to-cyan-600 rounded-lg overflow-hidden">
+                  <Image
+                    src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQMwNu50RAgmBhcHJELHP39VNP/a-digital-transformation-or-software-eng-1772520655309-3e8a6b70.png"
+                    alt="Digital Innovation"
+                    fill
+                    className="object-cover"
+                  />
+                </div>
+              ),
+              content: (
+                <div className="space-y-3">
+                  <h3 className="text-2xl font-semibold text-foreground">2021 - Digital Transformation</h3>
+                  <p className="text-foreground/80">Embraced digital transformation, launching innovative platforms connecting facilities and enabling predictive maintenance.</p>
+                  <ul className="space-y-2 text-foreground/70">
+                    <li className="flex items-center gap-2"><span className="text-primary-cta">•</span> Digital platform launched</li>
+                    <li className="flex items-center gap-2"><span className="text-primary-cta">•</span> 200+ team members</li>
+                    <li className="flex items-center gap-2"><span className="text-primary-cta">•</span> Global operations</li>
+                  </ul>
+                </div>
+              )
+            },
+            {
+              id: "5",              reverse: false,
+              media: (
+                <div className="relative w-full h-full bg-gradient-to-br from-teal-300 to-purple-600 rounded-lg overflow-hidden">
+                  <Image
+                    src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQMwNu50RAgmBhcHJELHP39VNP/a-professional-team-photo-showing-multip-1772520657446-6d95f7dd.png"
+                    alt="Global Recognition"
+                    fill
+                    className="object-cover"
+                  />
+                </div>
+              ),
+              content: (
+                <div className="space-y-3">
+                  <h3 className="text-2xl font-semibold text-foreground">2024 - Global Recognition</h3>
+                  <p className="text-foreground/80">Achieved 500+ successful projects, $2.3B in project value, and 95% client satisfaction rate. Recognized as industry leaders worldwide.</p>
+                  <ul className="space-y-2 text-foreground/70">
+                    <li className="flex items-center gap-2"><span className="text-primary-cta">•</span> 500+ projects completed</li>
+                    <li className="flex items-center gap-2"><span className="text-primary-cta">•</span> 95% client satisfaction</li>
+                    <li className="flex items-center gap-2"><span className="text-primary-cta">•</span> Global industry leader</li>
+                  </ul>
+                </div>
+              )
+            }
+          ]}
+        />
+      </div>
+
      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="Our Impact: Driving Results That Matter"
@@ -259,7 +410,7 @@ export default function ShatexLanding() {
        <ContactText
          text="Ready to transform your organization through strategic engineering and professional services? Let's discuss how Shatex Services can help you achieve your business goals with innovative, sustainable solutions."
          animationType="background-highlight"
-          background={{ variant: "plain" }}
+          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Schedule a Consultation", href: "https://calendly.com/shatex-services" },
            { text: "Contact Our Team", href: "mailto:hello@shatex.com" }
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -5,20 +5,20 @@
  /* --background: #f5f5f5;;
  --card: #ffffff;;
  --foreground: #1c1c1c;;
-  --primary-cta: #6139e6;;
-  --secondary-cta: #ffffff;;
-  --accent: #6139e6;;
-  --background-accent: #b3a8e8;; */
+  --primary-cta: #14b8a6;;
+  --secondary-cta: #9333ea;;
+  --accent: #06b6d4;;
+  --background-accent: #a78bfa;; */

  --background: #f5f5f5;;
  --card: #ffffff;;
  --foreground: #1c1c1c;;
-  --primary-cta: #6139e6;;
+  --primary-cta: #14b8a6;;
  --primary-cta-text: #f5f5f5;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #9333ea;;
  --secondary-cta-text: #1c1c1c;;
-  --accent: #6139e6;;
-  --background-accent: #b3a8e8;;
+  --accent: #06b6d4;;
+  --background-accent: #a78bfa;;

  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
Author	SHA1	Message	Date
bender	4c6ee1499d	Update src/app/page.tsx	2026-03-03 22:19:09 +00:00
bender	ec714e56cf	Update src/app/layout.tsx	2026-03-03 22:19:08 +00:00
bender	58a6b4c3b2	Merge version_2 into main Merge version_2 into main	2026-03-03 07:04:21 +00:00
bender	8a84d9e0aa	Update src/app/page.tsx	2026-03-03 07:04:16 +00:00
bender	e287b1454d	Merge version_2 into main Merge version_2 into main	2026-03-03 07:02:07 +00:00
bender	2ed3db67df	Update src/app/styles/variables.css	2026-03-03 07:02:02 +00:00
bender	4d1ac5bc9b	Update src/app/page.tsx	2026-03-03 07:02:02 +00:00
bender	a4e776bec3	Update src/app/layout.tsx	2026-03-03 07:02:01 +00:00
bender	3fac75630e	Merge version_1 into main Merge version_1 into main	2026-03-03 06:56:06 +00:00
bender	6d70bd6978	Merge version_1 into main Merge version_1 into main	2026-03-03 06:54:24 +00:00
bender	166617a2c0	Merge version_1 into main Merge version_1 into main	2026-03-03 06:51:58 +00:00