Update src/app/page.tsx

src/app/page.tsx

@@ -11,21 +11,23 @@ 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';
 
 export default function ShatexLanding() {
   return (
     <ThemeProvider
-      defaultButtonVariant="elastic-effect"
-      defaultTextAnimation="background-highlight"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
-      contentWidth="small"
-      sizing="large"
-      background="circleGradient"
-      cardStyle="layered-gradient"
-      primaryButtonStyle="double-inset"
-      secondaryButtonStyle="radial-glow"
-      headingFontWeight="light"
+      contentWidth="mediumLarge"
+      sizing="mediumLargeSizeLargeTitles"
+      background="aurora"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingInline
@@ -33,7 +35,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" }}
@@ -48,7 +51,7 @@ export default function ShatexLanding() {
           tag="Professional Engineering & Services"
           tagIcon={Zap}
           tagAnimation="slide-up"
-          background={{ variant: "plain" }}
+          background={{ variant: "aurora" }}
           leftCarouselItems={[
             {
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQMwNu50RAgmBhcHJELHP39VNP/a-professional-engineering-project-showc-1772520655872-7508b664.png?_wi=1",              imageAlt: "Innovative Engineering Project"
@@ -167,6 +170,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 +394,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" }