Tester

client/src/App.jsx

@@ -9,7 +9,6 @@ import Contact from './pages/Contact'
 import RemoteSensing from './pages/RemoteSensing'
 import Communications from './pages/Communications'
 import Trainings from './pages/Trainings'
-import ProjectManagement from './pages/ProjectManagement'
 
 const THEME_COOKIE = 'graphyma-theme'
 
@@ -93,7 +92,6 @@ function AnimatedRoutes() {
         <Route path="/services/remote-sensing" element={<RemoteSensing />} />
         <Route path="/services/communications" element={<Communications />} />
         <Route path="/services/trainings" element={<Trainings />} />
-        <Route path="/services/project-management" element={<ProjectManagement />} />
       </Routes>
     </AnimatePresence>
   )

client/src/assets/services/index.js

@@ -4,8 +4,6 @@ import communicationsImgLight from './communications-light.png'
 import communicationsImgDark from './communications-dark.png'
 import trainingsImgLight from './trainings-light.png'
 import trainingsImgDark from './trainings-dark.png'
-import projectManagementImgLight from './project-management-light.png'
-import projectManagementImgDark from './project-management-dark.png'
 
 export {
     remoteSensingImgLight,
@@ -14,6 +12,4 @@ export {
     communicationsImgDark,
     trainingsImgLight,
     trainingsImgDark,
-    projectManagementImgLight,
-    projectManagementImgDark,
 }

client/src/pages/Communications.jsx

@@ -10,10 +10,30 @@ const page = {
 }
 
 const CHANNELS = [
-  { title: 'Stakeholder Mapping', detail: 'Prioritize audiences, incentives, and adoption blockers.' },
-  { title: 'Narrative Design', detail: 'Translate EO complexity into human-ready stories.' },
-  { title: 'Campaign Orchestration', detail: 'Multi-channel delivery and feedback loops.' },
-  { title: 'Impact Measurement', detail: 'Usage analytics and adoption KPIs.' },
+  {
+    step: 'Mapping',
+    title: 'Stakeholder Mapping',
+    detail: 'Prioritize audiences, incentives, and adoption blockers to focus effort where it matters most.',
+    duration: 2.8,
+  },
+  {
+    step: 'Narrative',
+    title: 'Narrative Design',
+    detail: 'Translate EO complexity into human-ready stories that resonate with decision-makers.',
+    duration: 3.05,
+  },
+  {
+    step: 'Campaign',
+    title: 'Campaign Orchestration',
+    detail: 'Multi-channel delivery with continuous feedback loops to maximise reach and relevance.',
+    duration: 3.3,
+  },
+  {
+    step: 'Impact',
+    title: 'Impact Measurement',
+    detail: 'Usage analytics and adoption KPIs that prove the value of every communication effort.',
+    duration: 3.55,
+  },
 ]
 
 export default function Communications() {
@@ -74,7 +94,7 @@ export default function Communications() {
                 transition={{ duration: 0.65, delay: 0.12 }}
                 className="comms-hero-copy"
               >
-                We turn Earth Observation insights into business actions, making the value obvious at every level. 
+                We turn Earth Observation insights into business actions, making the value obvious at every level.
               </motion.p>
               <motion.div
                 initial={{ opacity: 0, y: 18 }}
@@ -125,7 +145,7 @@ export default function Communications() {
                     />
                     {/* Rotating belt around the central node */}
                     <motion.g
-            
+
                       transition={{ duration: 16, repeat: Infinity, ease: 'linear' }}
                       style={{ transformOrigin: '160px 130px' }}
                     >
@@ -198,7 +218,7 @@ export default function Communications() {
 
       <section className="section">
         <div className="container">
-          <div className="heritage-grid comms-section-grid">
+          <div className="comms-pipeline-header">
             <div>
               <motion.span
                 className="section-label"
@@ -219,60 +239,50 @@ export default function Communications() {
                 From awareness
                 <span className="gradient-text comms-section-title-break">to adoption</span>
               </motion.h2>
-              <motion.p
-                initial={{ opacity: 0, y: 22 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, amount: 0.6 }}
-                transition={{ duration: 0.65, delay: 0.12 }}
-                className="comms-section-copy"
-              >
-                We design the communication flow as a system: every touchpoint drives momentum, every insight gets turned into accessible value for your users.
-              </motion.p>
+            </div>
+            {/* <motion.p
+              initial={{ opacity: 0, y: 22 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, amount: 0.6 }}
+              transition={{ duration: 0.65, delay: 0.12 }}
+              className="comms-pipeline-copy"
+            >
+              We build communication systems that flow — every interaction drives results, and every insight creates real value for our users.
+            </motion.p> */}
+          </div>
+
+          <div className="comms-pipeline-list">
+            {CHANNELS.map((item, i) => (
               <motion.div
-                initial={{ opacity: 0, y: 18 }}
+                key={item.title}
+                initial={{ opacity: 0, y: 24 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, amount: 0.6 }}
-                transition={{ duration: 0.6, delay: 0.2 }}
-                className="comms-channel-list"
+                viewport={{ once: true, margin: '-40px' }}
+                transition={{ delay: i * 0.09, duration: 0.65 }}
+                whileHover={{ y: -3 }}
+                className="comms-pipeline-card"
               >
-                {CHANNELS.map((item) => (
-                  <motion.div
-                    key={item.title}
-                    whileHover={{ y: -4 }}
-                    transition={{ duration: 0.3 }}
-                    className="comms-channel-card"
-                  >
-                    <div className="comms-channel-title">{item.title}</div>
-                    <div className="comms-channel-detail">{item.detail}</div>
-                  </motion.div>
-                ))}
-              </motion.div>
-            </div>
+                <div className="comms-pipeline-left">
+                  <div className="comms-pipeline-number">{String(i + 1).padStart(2, '0')}</div>
+                  <div className="comms-pipeline-connector" />
+                </div>
 
-            <motion.div
-              initial={{ opacity: 0, x: 30 }}
-              whileInView={{ opacity: 1, x: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.8 }}
-              className="comms-network-wrap"
-            >
-              <div className="comms-stage-card">
-                <div className="comms-stage-list">
-                  {['Awareness', 'Trial', 'Adoption', 'Advocacy'].map((stage, i) => (
-                    <div key={stage} className="comms-stage-row">
-                      <div className="comms-stage-pill">{stage}</div>
-                      <div className="comms-stage-bar">
-                        <motion.div
-                          animate={{ x: ['-110%', '230%'] }}
-                          transition={{ duration: 3 + i * 0.2, repeat: Infinity, ease: 'linear' }}
-                          className="comms-stage-sweep"
-                        />
-                      </div>
+                <div className="comms-pipeline-body">
+                  <div className="comms-pipeline-top">
+                    <div className="comms-pipeline-step">{item.step}</div>
+                    <div className="comms-pipeline-bar">
+                      <motion.div
+                        animate={{ x: ['-110%', '230%'] }}
+                        transition={{ duration: item.duration, repeat: Infinity, ease: 'linear' }}
+                        className="comms-pipeline-sweep"
+                      />
                     </div>
-                  ))}
+                  </div>
+                  <div className="comms-pipeline-title">{item.title}</div>
+                  <div className="comms-pipeline-detail">{item.detail}</div>
                 </div>
-              </div>
-            </motion.div>
+              </motion.div>
+            ))}
           </div>
         </div>
       </section>

client/src/pages/Home.jsx

@@ -14,8 +14,6 @@ import {
   communicationsImgDark,
   trainingsImgLight,
   trainingsImgDark,
-  projectManagementImgLight,
-  projectManagementImgDark,
 } from '../assets/services/index.js'
 
 /* ── Page variants ─────────────────────────────── */
@@ -50,13 +48,6 @@ const SERVICES = [
     link: '/services/trainings',
     delay: 0.2,
   },
-  {
-    number: '04', icon: 'pm',
-    title: 'Project Management',
-    description: 'Strategic oversight and coordination of Earth Observation projects across public, private, and international stakeholder environments.',
-    link: '/services/project-management',
-    delay: 0.3,
-  },
 ]
 
 const STATS = [
@@ -72,28 +63,6 @@ const FLOAT_LABELS = [
   { label: 'Change Detection',  top: '38%', left: '-12%',  delay: 1.7 },
 ]
 
-const MARKET_FACTS = [
-  {
-    value: '$46.8B',
-    label: 'Projected global satellite market by 2031',
-    sub: 'Driven by EO, geospatial intelligence & remote sensing',
-  },
-  {
-    value: '25%',
-    label: 'Of the global satellite industry',
-    sub: 'Earth Observation is one of the largest segments',
-  },
-  {
-    value: '50%+',
-    label: 'Of EO applications',
-    sub: 'Supporting agriculture, forestry, environmental monitoring & natural resource management',
-  },
-  {
-    value: '60%',
-    label: 'Of Essential Climate Variables',
-    sub: 'Can be addressed by satellite data',
-  },
-]
 
 const ORBIT_NODES = [
   { label: 'ESA',      cx: 80,  cy: 230 },
@@ -119,11 +88,6 @@ const SERVICE_VISUALS = [
     imgDark: trainingsImgDark,
     imgLight: trainingsImgLight,
   },
-  {
-    title: 'Project Management',
-    imgDark: projectManagementImgDark,
-    imgLight: projectManagementImgLight,
-  },
 ]
 
 
@@ -307,52 +271,6 @@ export default function Home() {
         </div>
       </section>
 
-
-      {/* ══════════════════════════════════════
-          MARKET FACTS
-      ══════════════════════════════════════ */}
-      {/* <section className="home-facts-section">
-        <div className="container">
-          <motion.span
-            className="section-label"
-            initial={{ opacity: 0, y: 16 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.6 }}
-          >
-            Industry at a Glance
-          </motion.span>
-
-          <motion.h2
-            className="home-facts-title"
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ delay: 0.1, duration: 0.7 }}
-          >
-            The scale of <span className="gradient-text">Earth Observation</span>
-          </motion.h2>
-
-          <div className="home-facts-grid">
-            {MARKET_FACTS.map(({ value, label, sub }, i) => (
-              <motion.div
-                key={value}
-                className="home-fact-card"
-                initial={{ opacity: 0, y: 28 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, margin: '-40px' }}
-                transition={{ delay: i * 0.1, duration: 0.65 }}
-              >
-                <div className="home-fact-accent-line" />
-                <div className="home-fact-value">{value}</div>
-                <div className="home-fact-label">{label}</div>
-                <div className="home-fact-sub">{sub}</div>
-              </motion.div>
-            ))}
-          </div>
-        </div>
-      </section> */}
-
       {/* ══════════════════════════════════════
           SERVICES
       ══════════════════════════════════════ */}