update about page

2026-06-02 14:10:44 +05:30
parent a59a5e79dc
commit bae2fa0daa
24 changed files with 1903 additions and 1052 deletions
--- a/src/components/sections/Workflow2.tsx
+++ b/src/components/sections/Workflow2.tsx
@@ -22,79 +22,83 @@ export default function Workflow2() {
  ];

  return (
-    <section className="dm-workflow-section" aria-label="Doormile Innovation Workflow">
-      <div className="dm-workflow-card">
-        {/* Left Column: Overlapping Chevron Graphic */}
-        <div className="dm-workflow-left">
-          <svg viewBox="0 0 320 280" fill="none" xmlns="http://www.w3.org/2000/svg" className="dm-workflow-svg">
-            {/* Top-Left Chevron Outline (Low Opacity) */}
-            <path
-              d="M 30,20 C 22,20 16,26 16,34 L 78,85 C 81,88 81,92 78,95 L 16,146 C 16,154 22,160 30,160 L 130,160 C 138,160 145,154 148,146 L 204,95 C 207,92 207,88 204,85 L 148,34 C 145,26 138,20 130,20 Z"
-              stroke="white"
-              strokeWidth="2.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              opacity="0.25"
-            />
-            {/* Bottom-Right Chevron Outline (High Opacity) */}
-            <path
-              d="M 110,100 C 102,100 96,106 96,114 L 158,165 C 161,168 161,172 158,175 L 96,226 C 96,234 102,240 110,240 L 210,240 C 218,240 225,234 228,226 L 284,175 C 287,172 287,168 284,165 L 228,114 C 225,106 218,100 210,100 Z"
-              stroke="white"
-              strokeWidth="2.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              opacity="0.85"
-            />
-          </svg>
+    <section className="dm-workflow" aria-label="Workflow 2 — Competitive Edge & Innovation">
+      <div className="dm-workflow__container">
+
+        {/* ── Top sub-section: Competitive Edge banner ── */}
+        <div className="dm-workflow-banner">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            className="dm-workflow-banner__img"
+            src="/images/miletruth-2.png"
+            alt="Our Competitive Edge"
+            width={1733}
+            height={773}
+            loading="lazy"
+            decoding="async"
+          />
+          <div className="dm-workflow-banner__caption">
+            <span className="dm-workflow-banner__title-text">Our Competitive Edge</span>
+          </div>
        </div>

-        {/* Right Column: Quotes & Text Content */}
-        <div className="dm-workflow-right">
-          {/* Slanted red quotes block */}
-          <svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="dm-workflow-quote">
-            <rect x="2" y="2" width="9" height="20" rx="1.5" transform="skewX(-12)" fill="#C01227" />
-            <rect x="16" y="2" width="9" height="20" rx="1.5" transform="skewX(-12)" fill="#C01227" />
-          </svg>
-
-          {/* Heading */}
-          <h3 className="dm-workflow-title">
-            {slides[activeSlide].title}
-          </h3>
-
-          {/* Slide Paragraph with premium fade-in transition */}
-          <div className="dm-workflow-text-container">
-            <AnimatePresence mode="wait">
-              <motion.p
-                key={activeSlide}
-                initial={{ opacity: 0, y: 12 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: -12 }}
-                transition={{ duration: 0.28, ease: "easeInOut" }}
-                className="dm-workflow-text"
-              >
-                {slides[activeSlide].text}
-              </motion.p>
-            </AnimatePresence>
+        {/* ── Bottom sub-section: Innovation content ── */}
+        <div className="dm-workflow-card">
+          {/* Left Column: Overlapping Chevron Graphic */}
+          <div className="dm-workflow-left">
+            <svg viewBox="0 0 320 280" fill="none" xmlns="http://www.w3.org/2000/svg" className="dm-workflow-svg">
+              <path
+                d="M 30,20 C 22,20 16,26 16,34 L 78,85 C 81,88 81,92 78,95 L 16,146 C 16,154 22,160 30,160 L 130,160 C 138,160 145,154 148,146 L 204,95 C 207,92 207,88 204,85 L 148,34 C 145,26 138,20 130,20 Z"
+                stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" opacity="0.25"
+              />
+              <path
+                d="M 110,100 C 102,100 96,106 96,114 L 158,165 C 161,168 161,172 158,175 L 96,226 C 96,234 102,240 110,240 L 210,240 C 218,240 225,234 228,226 L 284,175 C 287,172 287,168 284,165 L 228,114 C 225,106 218,100 210,100 Z"
+                stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" opacity="0.85"
+              />
+            </svg>
          </div>

-          {/* Right-aligned Navigation (Counter + Indication lines) */}
-          <div className="dm-workflow-nav">
-            <span className="dm-workflow-counter">
-              0{activeSlide + 1}/03
-            </span>
-            <div className="dm-workflow-bars">
-              {slides.map((_, index) => (
-                <button
-                  key={index}
-                  type="button"
-                  aria-label={`Go to slide ${index + 1}`}
-                  className={`dm-workflow-bar ${index === activeSlide ? "is-active" : ""}`}
-                  onClick={() => setActiveSlide(index)}
-                />
-              ))}
+          {/* Right Column: Quotes & Text Content */}
+          <div className="dm-workflow-right">
+            <svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="dm-workflow-quote">
+              <rect x="2" y="2" width="9" height="20" rx="1.5" transform="skewX(-12)" fill="#C01227" />
+              <rect x="16" y="2" width="9" height="20" rx="1.5" transform="skewX(-12)" fill="#C01227" />
+            </svg>
+
+            <h3 className="dm-workflow-title">{slides[activeSlide].title}</h3>
+
+            <div className="dm-workflow-text-container">
+              <AnimatePresence mode="wait">
+                <motion.p
+                  key={activeSlide}
+                  initial={{ opacity: 0, y: 12 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -12 }}
+                  transition={{ duration: 0.28, ease: "easeInOut" }}
+                  className="dm-workflow-text"
+                >
+                  {slides[activeSlide].text}
+                </motion.p>
+              </AnimatePresence>
+            </div>
+
+            <div className="dm-workflow-nav">
+              <span className="dm-workflow-counter">0{activeSlide + 1}/03</span>
+              <div className="dm-workflow-bars">
+                {slides.map((_, index) => (
+                  <button
+                    key={index}
+                    type="button"
+                    aria-label={`Go to slide ${index + 1}`}
+                    className={`dm-workflow-bar ${index === activeSlide ? "is-active" : ""}`}
+                    onClick={() => setActiveSlide(index)}
+                  />
+                ))}
+              </div>
            </div>
          </div>
        </div>
+
      </div>

      <style dangerouslySetInnerHTML={{ __html: styles }} />
@@ -103,31 +107,77 @@ export default function Workflow2() {
 }

 const styles = `
-.dm-workflow-section {
-  max-width: 1700px;
-  margin: 20px auto;
+/* ============================================================
+   Workflow = ONE container: image-title banner (top) flush with
+   the dark content card (bottom). Single overflow:hidden wrapper
+   rounds the whole stack — no gap, no separate backgrounds.
+   ============================================================ */
+.dm-workflow {
+  max-width: 100%;
+  margin: 24px auto;
  padding: 0 40px;
  box-sizing: border-box;
 }

+.dm-workflow__container {
+  position: relative;
+  border-radius: 40px;
+  overflow: hidden;
+  background: #181818;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  box-shadow: 0 14px 50px -16px rgba(0, 0, 0, 0.55);
+}
+
+/* ── Banner (top) ── */
+.dm-workflow-banner {
+  position: relative;
+  display: block;
+  width: 100%;
+  font-size: 0;
+  line-height: 0;
+}
+.dm-workflow-banner__img {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: 380px;
+  object-fit: cover;
+  object-position: center;
+}
+.dm-workflow-banner__caption {
+  position: absolute;
+  left: 40px;
+  bottom: 32px;
+  background: rgba(255, 255, 255, 0.92);
+  padding: 16px 26px;
+  border-radius: 12px;
+  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.45);
+  line-height: normal;
+}
+.dm-workflow-banner__title-text {
+  display: block;
+  color: #C01227 !important;
+  font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif !important;
+  font-size: clamp(20px, 2.4vw, 34px) !important;
+  font-weight: 700 !important;
+  line-height: 1.1 !important;
+  letter-spacing: -0.01em;
+  text-transform: none !important;
+}
+
+/* ── Content card (bottom), flush under the banner ── */
 .dm-workflow-card {
  position: relative;
  background: #181818;
-  border-radius: 50px;
-  border: 1px solid rgba(255, 255, 255, 0.05);
-  box-shadow: 
-    0 10px 40px -10px rgba(0, 0, 0, 0.5),
-    inset 0 1px 0 rgba(255, 255, 255, 0.05);
-  padding: 40px 60px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  padding: 48px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
-  overflow: hidden;
  box-sizing: border-box;
 }

-/* Left Column - Graphic */
 .dm-workflow-left {
  flex: 1;
  display: flex;
@@ -135,14 +185,12 @@ const styles = `
  justify-content: center;
  max-width: 440px;
 }
-
 .dm-workflow-svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.3));
 }

-/* Right Column - Text & Slide Content */
 .dm-workflow-right {
  flex: 1.2;
  display: flex;
@@ -150,10 +198,7 @@ const styles = `
  align-items: flex-start;
  gap: 20px;
 }
-
-.dm-workflow-quote {
-  margin-bottom: 5px;
-}
+.dm-workflow-quote { margin-bottom: 5px; }

 .dm-workflow-title {
  font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif;
@@ -166,11 +211,7 @@ const styles = `
  text-transform: uppercase;
 }

-.dm-workflow-text-container {
-  min-height: 110px; /* Prevent layout shift when swapping slide texts */
-  width: 100%;
-}
-
+.dm-workflow-text-container { min-height: 110px; width: 100%; }
 .dm-workflow-text {
  font-family: var(--font-manrope), system-ui, sans-serif;
  font-size: 16px;
@@ -180,7 +221,6 @@ const styles = `
  padding: 0 !important;
 }

-/* Navigation footer */
 .dm-workflow-nav {
  display: flex;
  flex-direction: column;
@@ -189,7 +229,6 @@ const styles = `
  align-self: flex-end;
  margin-top: 10px;
 }
-
 .dm-workflow-counter {
  font-family: var(--font-space-grotesk), sans-serif;
  font-size: 13px;
@@ -197,12 +236,7 @@ const styles = `
  color: #737373;
  letter-spacing: 0.08em;
 }
-
-.dm-workflow-bars {
-  display: flex;
-  gap: 8px;
-}
-
+.dm-workflow-bars { display: flex; gap: 8px; }
 .dm-workflow-bar {
  width: 40px;
  height: 3px;
@@ -213,49 +247,32 @@ const styles = `
  cursor: pointer;
  transition: all 0.3s ease;
 }
+.dm-workflow-bar.is-active { background: #C01227; }
+.dm-workflow-bar:hover { background: rgba(255, 255, 255, 0.35); }
+.dm-workflow-bar.is-active:hover { background: #C01227; }

-.dm-workflow-bar.is-active {
-  background: #C01227;
-}
-
-.dm-workflow-bar:hover {
-  background: rgba(255, 255, 255, 0.35);
-}
-
-.dm-workflow-bar.is-active:hover {
-  background: #C01227;
-}
-
-/* Responsive design */
+/* ── Responsive ── */
@media (max-width: 1024px) {
-  .dm-workflow-card {
-    padding: 50px 50px;
-    gap: 50px;
-    border-radius: 40px;
-  }
-  .dm-workflow-title {
-    font-size: 32px;
-  }
+  .dm-workflow__container { border-radius: 32px; }
+  .dm-workflow-banner__img { max-height: 300px; }
+  .dm-workflow-banner__caption { left: 28px; bottom: 24px; padding: 13px 20px; }
+  .dm-workflow-card { padding: 44px 44px; gap: 44px; }
+  .dm-workflow-title { font-size: 32px; }
 }

@media (max-width: 768px) {
+  .dm-workflow { padding: 0 16px; }
+  .dm-workflow__container { border-radius: 24px; }
+  .dm-workflow-banner__img { max-height: 220px; }
+  .dm-workflow-banner__caption { left: 16px; bottom: 16px; padding: 11px 16px; }
  .dm-workflow-card {
    flex-direction: column;
-    padding: 40px 30px;
-    gap: 40px;
-    border-radius: 30px;
-  }
-  .dm-workflow-left {
-    max-width: 280px;
-  }
-  .dm-workflow-right {
-    width: 100%;
-  }
-  .dm-workflow-title {
-    font-size: 28px;
-  }
-  .dm-workflow-text-container {
-    min-height: auto;
+    padding: 36px 28px;
+    gap: 36px;
  }
+  .dm-workflow-left { max-width: 280px; }
+  .dm-workflow-right { width: 100%; }
+  .dm-workflow-title { font-size: 28px; }
+  .dm-workflow-text-container { min-height: auto; }
 }
 `;