fix home page style

2026-05-28 18:04:12 +05:30
parent 43dd4cef12
commit 0a65d2e04a
9 changed files with 557 additions and 223 deletions
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,5 +0,0 @@
-<!-- BEGIN:nextjs-agent-rules -->
-# This is NOT the Next.js you know
-
-This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
-<!-- END:nextjs-agent-rules -->
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1 +0,0 @@
-@AGENTS.md
--- a/public/images/Team/1.png
+++ b/public/images/Team/1.png
--- a/public/images/Team/3
+++ b/public/images/Team/3
--- a/public/images/Team/4.png
+++ b/public/images/Team/4.png
--- a/public/images/Team/5.png
+++ b/public/images/Team/5.png
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -400,3 +400,293 @@
    min-width: 64px;
  }
 }
+
+/* Custom premium Industry Solutions hover cards styles */
+.industry-solutions-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 30px;
+  width: 90%;
+  margin: 30px auto;
+}
+
+@media (max-width: 1024px) {
+  .industry-solutions-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .industry-solutions-grid {
+    grid-template-columns: 1fr;
+  }
+}.industry-card-link {
+  position: relative;
+  height: 600px;
+  border-radius: 30px;
+  overflow: hidden;
+  display: block;
+  text-decoration: none;
+  background: #121212;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
+  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
+}
+
+/* Elegant glass border highlight */
+.industry-card-link::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 30px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  z-index: 6;
+  pointer-events: none;
+  transition: border-color 0.4s ease;
+}
+
+/* Premium luxury shimmer sweep animation on hover */
+@keyframes shimmer-sweep {
+  0% { transform: translateX(-150%) skewX(-25deg); }
+  100% { transform: translateX(150%) skewX(-25deg); }
+}
+
+.industry-card-link::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 60%;
+  height: 100%;
+  background: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.18) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  transform: translateX(-150%) skewX(-25deg);
+  z-index: 7;
+  pointer-events: none;
+}
+
+.industry-card-link:hover::before {
+  animation: shimmer-sweep 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+}
+
+.industry-card-link:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 20px 40px rgba(192, 18, 39, 0.25);
+}
+
+.industry-card-link:hover::after {
+  border-color: rgba(255, 255, 255, 0.25);
+}
+
+.industry-card-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.industry-card-link:hover .industry-card-bg {
+  transform: scale(1.04);
+}
+
+.industry-card-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
+  transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+/* Fade out dark overlay on hover to prevent muddying the crimson wash! */
+.industry-card-link:hover .industry-card-overlay {
+  opacity: 0;
+}
+
+.industry-card-hover-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  /* Glowing vibrant crimson wash matching the reference image exactly */
+  background: linear-gradient(to top, rgba(192, 18, 39, 0.88) 0%, rgba(215, 20, 40, 0.8) 100%);
+  opacity: 0;
+  transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.industry-card-link:hover .industry-card-hover-bg {
+  opacity: 1;
+}
+
+/* Default card bottom text state */
+.industry-card-default-content {
+  position: absolute;
+  bottom: 40px;
+  left: 24px;
+  z-index: 4;
+  opacity: 1;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+  transform: translateY(0);
+}
+
+.industry-card-link:hover .industry-card-default-content {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.industry-card-default-title {
+  color: #ffffff !important;
+  font-size: 28px !important;
+  font-weight: 700 !important;
+  margin: 0 !important;
+  letter-spacing: -0.5px !important;
+  text-transform: none !important;
+  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
+}
+
+/* Hover state content wrapper */
+.industry-card-hover-content {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  padding: 40px 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  opacity: 0;
+  transform: translateY(6px);
+  transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
+  pointer-events: none;
+}
+
+.industry-card-link:hover .industry-card-hover-content {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.industry-card-hover-top {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* Premium horizontal top divider line from the prompt design */
+.industry-card-hover-top::before {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 1px;
+  background: rgba(255, 255, 255, 0.25);
+  margin-bottom: 5px;
+}
+
+.industry-card-description {
+  color: #ffffff !important;
+  font-size: 18px !important;
+  line-height: 1.4 !important;
+  margin: 0 !important;
+  font-weight: 600 !important;
+  letter-spacing: -0.2px !important;
+  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
+}
+
+.industry-card-section-title {
+  color: #ffffff !important;
+  font-size: 12px !important;
+  font-weight: 800 !important;
+  letter-spacing: 1.5px !important;
+  margin-bottom: 10px !important;
+  text-transform: uppercase !important;
+  opacity: 0.9 !important;
+  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
+}
+
+.industry-card-list {
+  list-style: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 6px !important;
+}
+
+.industry-card-list-item {
+  color: rgba(255, 255, 255, 0.9) !important;
+  font-size: 15px !important;
+  line-height: 1.4 !important;
+  position: relative !important;
+  padding-left: 18px !important;
+  opacity: 0;
+  transform: translateY(5px);
+  transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
+}
+
+.industry-card-link:hover .industry-card-list-item {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Staggered animation entry delays - snappier response */
+.industry-card-list-item.bullet-1 { transition-delay: 0.04s; }
+.industry-card-list-item.bullet-2 { transition-delay: 0.08s; }
+.industry-card-list-item.bullet-3 { transition-delay: 0.12s; }
+.industry-card-list-item.bullet-4 { transition-delay: 0.16s; }
+.industry-card-list-item.bullet-5 { transition-delay: 0.2s; }
+.industry-card-list-item.bullet-6 { transition-delay: 0.24s; }
+
+/* Custom CSS circular dot for bullet points to guarantee consistent rendering */
+.industry-card-list-item::before {
+  content: "" !important;
+  position: absolute !important;
+  left: 0 !important;
+  top: 7px !important;
+  width: 6px !important;
+  height: 6px !important;
+  background-color: #ffffff !important;
+  border-radius: 50% !important;
+}
+
+/* Hover state bottom section */
+.industry-card-hover-bottom {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.industry-card-hover-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #c01227;
+  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease, color 0.3s ease;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+}
+
+/* Removed rotate(45deg) which turned the ↗ diagonal arrow into a straight right arrow → */
+.industry-card-link:hover .industry-card-hover-icon {
+  transform: scale(1.08) translateY(-2px);
+  background-color: #ffffff;
+  color: #c01227;
+}
+
+.industry-card-hover-title {
+  color: #ffffff !important;
+  font-size: 24px !important;
+  font-weight: 700 !important;
+  margin: 0 !important;
+  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
+  text-transform: none !important;
+  letter-spacing: -0.5px !important;
+}
+
+.elementor-element-3b4a7cc > .e-con-inner {
+  padding-left: clamp(20px, 4vw, 50px) !important;
+  padding-right: clamp(20px, 4vw, 50px) !important;
+}
--- a/src/components/sections/IndustrySolutions.tsx
+++ b/src/components/sections/IndustrySolutions.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import Link from "next/link";
+import Image from "next/image";

 export default function IndustrySolutions() {
  return (
@@ -9,14 +10,59 @@ export default function IndustrySolutions() {
            
            <div className="elementor-element elementor-element-f64bd88 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="f64bd88" data-element_type="container" data-e-type="container">
              <div className="elementor-element elementor-element-5ed2dbb e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5ed2dbb" data-element_type="container" data-e-type="container">
-              <div className="elementor-element elementor-element-c8162c4 elementor-widget elementor-widget-logico_heading" data-id="c8162c4" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
+                <div className="elementor-element elementor-element-c8162c4 elementor-widget elementor-widget-logico_heading" data-id="c8162c4" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default" style={{paddingLeft: "50px"}}>
                  <div className="elementor-widget-container">
                    <div className="logico-title">/ Industry Solutions /</div>
                  </div>
                </div>
-              <div className="elementor-element elementor-element-1487241 elementor-widget__width-initial elementor-widget elementor-widget-logico_heading" data-id="1487241" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
-                <div className="elementor-widget-container">
-                  <h3 className="logico-title">Smart solutions built exclusively for your industry</h3>
+                <div 
+                  className="elementor-element elementor-element-1487241 elementor-widget__width-initial elementor-widget elementor-widget-logico_heading animated logico_heading_animation" 
+                  data-id="1487241" 
+                  data-element_type="widget" 
+                  data-e-type="widget" 
+                  data-settings='{"_animation":"logico_heading_animation"}' 
+                  data-widget_type="logico_heading.default"
+                  style={{marginLeft: "50px"}}
+                >
+                  <div className="elementor-widget-container" style={{animationDelay: "0.1s", margin: "30px 0 0 0"}}>
+                    <h3 className="logico-title animated-ready" style={{ fontSize: "clamp(36px, 5.5vw, 62px)", lineHeight: "1.1", fontWeight: 800, textTransform: "uppercase", paddingRight: "clamp(20px, 8vw, 120px)" }}>
+                      {(() => {
+                        const lines = [
+                          "Smart solutions built",
+                          "exclusively for your",
+                          "industry"
+                        ];
+                        let letterCount = 0;
+                        return lines.map((line, lineIdx) => (
+                          <React.Fragment key={lineIdx}>
+                            {line.split(" ").map((word, wordIdx, arr) => {
+                              const letters = word.split("").map((char, charIdx) => {
+                                const delay = `${(letterCount * 0.02).toFixed(2)}s`;
+                                letterCount++;
+                                return (
+                                  <span 
+                                    key={charIdx} 
+                                    className="letter" 
+                                    style={{ animationDelay: delay }}
+                                  >
+                                    {char}
+                                  </span>
+                                );
+                              });
+                              return (
+                                <React.Fragment key={wordIdx}>
+                                  <span className="word">
+                                    {letters}
+                                  </span>
+                                  {wordIdx < arr.length - 1 && " "}
+                                </React.Fragment>
+                              );
+                            })}
+                            {lineIdx < lines.length - 1 && <br />}
+                          </React.Fragment>
+                        ));
+                      })()}
+                    </h3>
                  </div>
                </div>
              </div>
@@ -29,196 +75,203 @@ export default function IndustrySolutions() {

            <div className="elementor-element elementor-element-6829276 e-grid e-con-full cut-corner-no sticky-container-off e-con e-child" data-id="6829276" data-element_type="container" data-e-type="container">
              
+              <div className="industry-solutions-grid">
+                
                {/* Card 1: FMCG */}
-            <Link 
-              className="elementor-element elementor-element-b891c78 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" 
-              data-id="b891c78" 
-              data-element_type="container" 
-              data-e-type="container" 
-              data-settings="{&quot;background_background&quot;:&quot;classic&quot;}" 
-              href="/solutions" 
-              style={{ textDecoration: "none", position: "relative" }}
-            >
-              <div className="elementor-element elementor-element-324d615 elementor-widget elementor-widget-image" data-id="324d615" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
-                <div className="elementor-widget-container">
-                  <img loading="lazy" decoding="async" src="/images/tab-pic-1.jpeg" className="attachment-full size-full wp-image-4777" alt="FMCG Logistics" style={{ width: "100%", height: "auto", objectFit: "cover", aspectRatio: "218/222", borderRadius: "20px 20px 0 0" }} />
+                <Link href="/solutions" className="industry-card-link">
+                  <div className="industry-card-bg">
+                    <Image 
+                      src="/images/tab-pic-1.jpeg" 
+                      alt="FMCG Logistics" 
+                      fill 
+                      style={{ objectFit: "cover" }} 
+                      sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                    />
+                  </div>
+                  <div className="industry-card-overlay" />
+                  <div className="industry-card-hover-bg" />
+                  
+                  {/* Default state */}
+                  <div className="industry-card-default-content">
+                    <h4 className="industry-card-default-title">FMCG</h4>
+                  </div>
+                  
+                  {/* Hover state */}
+                  <div className="industry-card-hover-content">
+                    <div className="industry-card-hover-top">
+                      <p className="industry-card-description">
+                        High volume, tight margins, zero tolerance for stockouts.
+                      </p>
+                      <div>
+                        <h5 className="industry-card-section-title">Challenges</h5>
+                        <ul className="industry-card-list">
+                          <li className="industry-card-list-item bullet-1">Unpredictable demand spikes</li>
+                          <li className="industry-card-list-item bullet-2">Fresh product expiry constraints</li>
+                          <li className="industry-card-list-item bullet-3">Multi-stop route complexity</li>
+                        </ul>
+                      </div>
+                      <div>
+                        <h5 className="industry-card-section-title">Doormile Solutions</h5>
+                        <ul className="industry-card-list">
+                          <li className="industry-card-list-item bullet-4">AI-driven demand-responsive routing</li>
+                          <li className="industry-card-list-item bullet-5">Freshness-aware delivery prioritization</li>
+                          <li className="industry-card-list-item bullet-6">Dynamic batch optimization</li>
+                        </ul>
                      </div>
                    </div>
                    
-              <div className="elementor-element elementor-element-210395f elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="210395f" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
-                <div className="elementor-widget-container">
-                  <div className="elementor-divider">
-                    <span className="elementor-divider-separator"></span>
-                  </div>
-                </div>
-              </div>
-              <div className="elementor-element elementor-element-ae37a4f elementor-widget elementor-widget-logico_heading" data-id="ae37a4f" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
-                <div className="elementor-widget-container">
-                  <div className="logico-title">
-                    <span className="title-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                    <div className="industry-card-hover-bottom">
+                      <div className="industry-card-hover-icon">
+                        <svg 
+                          xmlns="http://www.w3.org/2000/svg" 
+                          viewBox="0 0 24 24" 
+                          fill="none" 
+                          stroke="currentColor" 
+                          strokeWidth="3" 
+                          strokeLinecap="round" 
+                          strokeLinejoin="round" 
+                          style={{ width: "20px", height: "20px" }}
+                        >
                          <line x1="7" y1="17" x2="17" y2="7"></line>
                          <polyline points="7 7 17 7 17 17"></polyline>
                        </svg>
-                    </span>
-                    FMCG
                      </div>
-                </div>
-              </div>
-              <div className="elementor-element elementor-element-883bc91 elementor-widget elementor-widget-text-editor" data-id="883bc91" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
-                <div className="elementor-widget-container">
-                  <p>High volume, tight margins, zero tolerance for stockouts.</p>
-                </div>
-              </div>
-
-              {/* Hover content list */}
-              <div className="hover-list-content">
-                <div className="list-section">
-                  <h4 className="list-section-title">CHALLENGES</h4>
-                  <ul className="hover-items-list">
-                    <li><span>Unpredictable demand spikes</span></li>
-                    <li><span>Fresh product expiry constraints</span></li>
-                    <li><span>Multi-stop route complexity</span></li>
-                  </ul>
-                </div>
-                <div className="list-section">
-                  <h4 className="list-section-title">DOORMILE SOLUTIONS</h4>
-                  <ul className="hover-items-list">
-                    <li><span>AI-driven demand-responsive routing</span></li>
-                    <li><span>Freshness-aware delivery prioritization</span></li>
-                    <li><span>Dynamic batch optimization</span></li>
-                  </ul>
+                      <h4 className="industry-card-hover-title">FMCG</h4>
                    </div>
                  </div>
                </Link>

                {/* Card 2: Pharmaceutical */}
-            <Link 
-              className="elementor-element elementor-element-9b933db e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" 
-              data-id="9b933db" 
-              data-element_type="container" 
-              data-e-type="container" 
-              data-settings="{&quot;background_background&quot;:&quot;classic&quot;}" 
-              href="/solutions" 
-              style={{ textDecoration: "none", position: "relative" }}
-            >
-              <div className="elementor-element elementor-element-7d2d322 elementor-widget elementor-widget-image" data-id="7d2d322" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
-                <div className="elementor-widget-container">
-                  <img loading="lazy" decoding="async" src="/images/tab-pic-2.jpeg" className="attachment-full size-full wp-image-4791" alt="Pharma Logistics" style={{ width: "100%", height: "auto", objectFit: "cover", aspectRatio: "218/215", borderRadius: "20px 20px 0 0" }} />
+                <Link href="/solutions" className="industry-card-link">
+                  <div className="industry-card-bg">
+                    <Image 
+                      src="/images/tab-pic-2.jpeg" 
+                      alt="Pharma Logistics" 
+                      fill 
+                      style={{ objectFit: "cover" }} 
+                      sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                    />
+                  </div>
+                  <div className="industry-card-overlay" />
+                  <div className="industry-card-hover-bg" />
+                  
+                  {/* Default state */}
+                  <div className="industry-card-default-content">
+                    <h4 className="industry-card-default-title">Pharmaceutical</h4>
+                  </div>
+                  
+                  {/* Hover state */}
+                  <div className="industry-card-hover-content">
+                    <div className="industry-card-hover-top">
+                      <p className="industry-card-description">
+                        Temperature-sensitive, compliance-critical, life-saving.
+                      </p>
+                      <div>
+                        <h5 className="industry-card-section-title">Challenges</h5>
+                        <ul className="industry-card-list">
+                          <li className="industry-card-list-item bullet-1">Cold chain integrity requirements</li>
+                          <li className="industry-card-list-item bullet-2">Regulatory compliance tracking</li>
+                          <li className="industry-card-list-item bullet-3">Critical delivery time windows</li>
+                        </ul>
+                      </div>
+                      <div>
+                        <h5 className="industry-card-section-title">Doormile Solutions</h5>
+                        <ul className="industry-card-list">
+                          <li className="industry-card-list-item bullet-4">Real-time temperature monitoring</li>
+                          <li className="industry-card-list-item bullet-5">Chain-of-custody documentation</li>
+                          <li className="industry-card-list-item bullet-6">Priority override for critical shipments</li>
+                        </ul>
                      </div>
                    </div>
                    
-              <div className="elementor-element elementor-element-df092c4 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="df092c4" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
-                <div className="elementor-widget-container">
-                  <div className="elementor-divider">
-                    <span className="elementor-divider-separator"></span>
-                  </div>
-                </div>
-              </div>
-              <div className="elementor-element elementor-element-4c372aa elementor-widget elementor-widget-logico_heading" data-id="4c372aa" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
-                <div className="elementor-widget-container">
-                  <div className="logico-title">
-                    <span className="title-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                    <div className="industry-card-hover-bottom">
+                      <div className="industry-card-hover-icon">
+                        <svg 
+                          xmlns="http://www.w3.org/2000/svg" 
+                          viewBox="0 0 24 24" 
+                          fill="none" 
+                          stroke="currentColor" 
+                          strokeWidth="3" 
+                          strokeLinecap="round" 
+                          strokeLinejoin="round" 
+                          style={{ width: "20px", height: "20px" }}
+                        >
                          <line x1="7" y1="17" x2="17" y2="7"></line>
                          <polyline points="7 7 17 7 17 17"></polyline>
                        </svg>
-                    </span>
-                    Pharmaceutical
                      </div>
-                </div>
-              </div>
-              <div className="elementor-element elementor-element-9f3d9b6 elementor-widget elementor-widget-text-editor" data-id="9f3d9b6" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
-                <div className="elementor-widget-container">
-                  <p>Temperature-sensitive, compliance-critical, life-saving.</p>
-                </div>
-              </div>
-
-              {/* Hover content list */}
-              <div className="hover-list-content">
-                <div className="list-section">
-                  <h4 className="list-section-title">CHALLENGES</h4>
-                  <ul className="hover-items-list">
-                    <li><span>Cold chain integrity requirements</span></li>
-                    <li><span>Regulatory compliance tracking</span></li>
-                    <li><span>Critical delivery time windows</span></li>
-                  </ul>
-                </div>
-                <div className="list-section">
-                  <h4 className="list-section-title">DOORMILE SOLUTIONS</h4>
-                  <ul className="hover-items-list">
-                    <li><span>Real-time temperature monitoring</span></li>
-                    <li><span>Chain-of-custody documentation</span></li>
-                    <li><span>Priority override for critical shipments</span></li>
-                  </ul>
+                      <h4 className="industry-card-hover-title">Pharmaceutical</h4>
                    </div>
                  </div>
                </Link>

                {/* Card 3: Enterprise & B2B */}
-            <Link 
-              className="elementor-element elementor-element-280b0dc e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" 
-              data-id="280b0dc" 
-              data-element_type="container" 
-              data-e-type="container" 
-              data-settings="{&quot;background_background&quot;:&quot;classic&quot;}" 
-              href="/solutions" 
-              style={{ textDecoration: "none", position: "relative" }}
-            >
-              <div className="elementor-element elementor-element-6421147 elementor-widget elementor-widget-image" data-id="6421147" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
-                <div className="elementor-widget-container">
-                  <img loading="lazy" decoding="async" src="/images/tab-pic-3.jpeg" className="attachment-full size-full wp-image-4805" alt="Enterprise Logistics" style={{ width: "100%", height: "auto", objectFit: "cover", aspectRatio: "221/222", borderRadius: "20px 20px 0 0" }} />
+                <Link href="/solutions" className="industry-card-link">
+                  <div className="industry-card-bg">
+                    <Image 
+                      src="/images/tab-pic-3.jpeg" 
+                      alt="Enterprise Logistics" 
+                      fill 
+                      style={{ objectFit: "cover" }} 
+                      sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                    />
+                  </div>
+                  <div className="industry-card-overlay" />
+                  <div className="industry-card-hover-bg" />
+                  
+                  {/* Default state */}
+                  <div className="industry-card-default-content">
+                    <h4 className="industry-card-default-title">Enterprise & B2B</h4>
+                  </div>
+                  
+                  {/* Hover state */}
+                  <div className="industry-card-hover-content">
+                    <div className="industry-card-hover-top">
+                      <p className="industry-card-description">
+                        High-value shipments with complex delivery requirements.
+                      </p>
+                      <div>
+                        <h5 className="industry-card-section-title">Challenges</h5>
+                        <ul className="industry-card-list">
+                          <li className="industry-card-list-item bullet-1">Appointment scheduling coordination</li>
+                          <li className="industry-card-list-item bullet-2">White-glove delivery standards</li>
+                          <li className="industry-card-list-item bullet-3">Multi-location routing complexity</li>
+                        </ul>
+                      </div>
+                      <div>
+                        <h5 className="industry-card-section-title">Doormile Solutions</h5>
+                        <ul className="industry-card-list">
+                          <li className="industry-card-list-item bullet-4">Automated appointment optimization</li>
+                          <li className="industry-card-list-item bullet-5">Service level guarantee tracking</li>
+                          <li className="industry-card-list-item bullet-6">Enterprise integration APIs</li>
+                        </ul>
                      </div>
                    </div>
                    
-              <div className="elementor-element elementor-element-89bf910 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="89bf910" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
-                <div className="elementor-widget-container">
-                  <div className="elementor-divider">
-                    <span className="elementor-divider-separator"></span>
-                  </div>
-                </div>
-              </div>
-              <div className="elementor-element elementor-element-92524cd elementor-widget elementor-widget-logico_heading" data-id="92524cd" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
-                <div className="elementor-widget-container">
-                  <div className="logico-title">
-                    <span className="title-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                    <div className="industry-card-hover-bottom">
+                      <div className="industry-card-hover-icon">
+                        <svg 
+                          xmlns="http://www.w3.org/2000/svg" 
+                          viewBox="0 0 24 24" 
+                          fill="none" 
+                          stroke="currentColor" 
+                          strokeWidth="3" 
+                          strokeLinecap="round" 
+                          strokeLinejoin="round" 
+                          style={{ width: "20px", height: "20px" }}
+                        >
                          <line x1="7" y1="17" x2="17" y2="7"></line>
                          <polyline points="7 7 17 7 17 17"></polyline>
                        </svg>
-                    </span>
-                    Enterprise & B2B
                      </div>
-                </div>
-              </div>
-              <div className="elementor-element elementor-element-dfc8e7c elementor-widget elementor-widget-text-editor" data-id="dfc8e7c" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
-                <div className="elementor-widget-container">
-                  <p>High-value shipments with complex delivery requirements.</p>
-                </div>
-              </div>
-
-              {/* Hover content list */}
-              <div className="hover-list-content">
-                <div className="list-section">
-                  <h4 className="list-section-title">CHALLENGES</h4>
-                  <ul className="hover-items-list">
-                    <li><span>Appointment scheduling coordination</span></li>
-                    <li><span>White-glove delivery standards</span></li>
-                    <li><span>Multi-location routing complexity</span></li>
-                  </ul>
-                </div>
-                <div className="list-section">
-                  <h4 className="list-section-title">DOORMILE SOLUTIONS</h4>
-                  <ul className="hover-items-list">
-                    <li><span>Automated appointment optimization</span></li>
-                    <li><span>Service level guarantee tracking</span></li>
-                    <li><span>Enterprise integration APIs</span></li>
-                  </ul>
+                      <h4 className="industry-card-hover-title">Enterprise & B2B</h4>
                    </div>
                  </div>
                </Link>

              </div>
+
+            </div>
          </div>
        </div>
      </div>
--- a/src/components/sections/Workflow2.tsx
+++ b/src/components/sections/Workflow2.tsx
@@ -1,6 +1,7 @@
 "use client";

 import React, { useState } from "react";
+import Image from "next/image";

 export default function Workflow2() {
  const [activeSlide, setActiveSlide] = useState(0);
@@ -59,11 +60,9 @@ export default function Workflow2() {
                  <div className="image-slider">
                    <div className="image-item slider-item">
                      <div className="image-item-card with-height">
-                        <img 
-                          loading="lazy" 
-                          decoding="async" 
-                          width="1733" 
-                          height="773" 
+                        <Image 
+                          width={1733} 
+                          height={773} 
                          src="/images/miletruth-2.png" 
                          className="attachment-full size-full wp-image-5026" 
                          alt="Workflow 2" 
@@ -94,11 +93,9 @@ export default function Workflow2() {
                <div className="elementor-element elementor-element-8f3f74d e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="8f3f74d" data-element_type="container" data-e-type="container">
                  <div className="elementor-element elementor-element-f5a66b2 elementor-widget elementor-widget-image" data-id="f5a66b2" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
                    <div className="elementor-widget-container">
-                      <img 
-                        loading="lazy" 
-                        decoding="async" 
-                        width="491" 
-                        height="373" 
+                      <Image 
+                        width={491} 
+                        height={373} 
                        src="/images/home2-pic-2.png" 
                        className="attachment-full size-full wp-image-4396" 
                        alt="Decorative pic"